vue如何在多个不同服务器下访问不同地址
作者:wzp6010625
一、前言
通常 vue 在本地启动时,访问的后端地址是同事的机器或者线上一个环境(通常叫开发环境)。假如服务器有多个环境:开发、测试、培训、生产……这样每次发版前,都要手动在 git 仓库修改后端地址,就很麻烦。
所以想要实现一个目的:不修改代码,通过执行不同命令,发布不同环境
二、实现思路
仅针对 npm run build 打包后放到服务器运行的项目,对于直接把源码放在服务器执行 npm run dev 的项目,参照本文思路,修改 build / webpack.dev.conf.js 文件中,process.env 的赋值过程即可。
把不同服务的地址都配置出来,发布不同环境时,执行不同脚本,这样来获取相应的地址。
三、实践
1. 获取axios请求地址
process 是 Vue 中一个全局变量,利用这一点,我们可以从它上边取服务器地址,赋值给 baseURL,取到后既可以封装到 axios 中,也可以作为他用。代码如下:
const baseURL = process.env.BASE_API; // BASE_API是我们自定义的一个属性,名称随意,只要保证所有地方一致就行
至于在哪里定义 BASE_API ,下面步骤会讲到。
2. 配置不同服务器的地址
2.1 在 config 文件夹下,会看到几个 xxx.env.js 的文件,dev 和 prod 默认就有。
每一个文件,把它当作不同的环境,如 dev 代表开发,prod 代表生产。
如果还有其他环境,比如培训环境,就把 prod.env.js 复制一份(复制 prod 不是 dev),命名为 train.env.js (名字自定义)。
2.2 修改 xxx.env.js 中内容,以生产环境为例,配置一个 BASE_API (就是第1步所用到的),值就是服务器地址。
注意这里的值是单引号嵌套双引号,少一层嵌套是无效的
'use strict' module.exports = { NODE_ENV: '"production"', BASE_API: '"https://www.***.com"' }
2.3 还记得刚刚创建的 train.env.js (如果没有新建的可跳过这一步),对于这种手动创建的,要改一下 NODE_ENV,不然就和生产重名了。
'use strict' module.exports = { NODE_ENV: '"train"', // production改为自定义名字 BASE_API: '"https://www.***.com"' }
3. 打包时根据 process.env.NODE_ENV 判断不同环境
build 文件夹下,webpack.prod.conf.js,找到为 const env = 这段(代码第14行),改成如下形式
const env = (function() { const NODE_ENV = process.env.NODE_ENV; if (NODE_ENV === 'testing') { return require('../config/test.env') } else if (NODE_ENV === 'train') { // 这个就是刚刚自定义的环境 return require('../config/train.env') } else { // 默认用生产环境 return require('../config/prod.env') } }())
4. 清除默认 process.env.NODE_ENV
build 文件夹下,build.js 中,默认 process.env.NODE_ENV 是 production,先注释它
'use strict' require('./check-versions')() // process.env.NODE_ENV = 'production' // 注释掉这一段 const ora = require('ora') const rm = require('rimraf') const path = require('path') const chalk = require('chalk') const webpack = require('webpack') const config = require('../config') const webpackConfig = require('./webpack.prod.conf')
5. 设置不同的 process.env.NODE_ENV
由于上一步清除了默认的 process.env.NODE_ENV,要在其他地方加回来
5.1 build文件夹下,新建 buildProd.js
代码如下
'use strict' process.env.NODE_ENV = 'production' require('./build.js')
5.2 如果有其他环境,比如上面说的培训环境,新建 buildTrain.js (名字自定义)
代码如下
'use strict' process.env.NODE_ENV = 'train' // 值要和 webpack.prod.conf.js 中判断的地方对应上 require('./build.js')
6. 配置 script 脚本
package.json 中,配置 script 脚本。
通常我们打包时,执行 npm run build,经过以上修改后,我们就要用不同的命令,来打包不同环境
/** * 本代码中的注释只是为了说明,json中是不允许写这些注释的 */ "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", // "build": "node build/build.js", // 这是原来默认的,写在这里做参照 "build": "node build/buildProd.js", // 生产环境,改为 buildProd.js "train": "node build/buildTrain.js" // 培训环境,改为 buildTrain.js },
到这里,所有的修改都完成了,在发布不同环境时,这样执行:
生产环境:npm run build;培训环境:npm run train。其他环境举一反三。
把不同环境的命令交给集成工程师,让他们写到 Jenkins 脚本中就可以了。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。