vue如何在多个不同服务器下访问不同地址
一、前言
通常 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 脚本中就可以了。
上一篇：vue3+ts+EsLint+Prettier规范代码的方法实现
栏 目：vue
本文标题：vue如何在多个不同服务器下访问不同地址
本文地址：http://www.codeinn.net/misctech/227257.html
