一、多环境公用一个包即可
我们的项目一般都是有生产环境和测试环境，这两个环境一般只有域名和端口号不同，其他都一样，在这种情况下，我们是不需要做多环境配置的。在我们的代码中baseURL可以直接写斜杠即可（/），不用配置环境变量，如下代码：
const request = axios.create({
baseURL:'/',
timeout: 10000,
})
这样打包（yarn run build）产生的dist文件夹测试环境上和生产环境上可以用同一个包。
二、多环境多个包，多个环境配置
当我们的项目测试环境和生产环境除了域名和端口号不同之外，还有其他的不同时，需要做环境变量的配置。例如：
测试环境登录请求地址：http://test-data.xx.com/apitest/data-service/system/login
生产环境登录请求地址：http://data.xx.com/api/data-service/system/login
这种情况，怎么办呢？
1.错误尝试
我曾尝试过直接修改baseURL（有点傻~~），如下代码：
const request = axios.create({
baseURL:process.env.NODE_ENV ==='development'?'/apitest':'/api',
timeout: 10000,
})
结果发现执行 yarn run serve 时走的是development，插入的前缀是apitest，执行yarn run build 时走的是production，插入的前缀都是api，并没有区分开测试环境和生产环境，只是和开发环境区分开了。所以以上尝试失败。最后突然想起了环境变量的配置。
2.解决方法-配置环境变量
我们发现vue-cli 提供了三个模式(test、development、production)而每种NODE_ENV下面可以配置多个环境变量。
我们可以通过.env文件增加后缀来设置某个模式下特有的环境变量
我们可以通过传递 --mode选项参数为命令覆写默认的模式，使用自己的环境变量
（1）首先在项目目录下创建不同的.env文件，目前我们讨论 开发环境 dev,测试环境test,发布环境 prod，所以我们创建如下三个文件(.env.production、.env.test、.env.development)，如下图所示
不同环境的配置文件
三个文件中的具体配置如下：
开发环境配置信息
测试环境配置信息
需要注意：测试环境的NODE_ENV是production
生产环境配置信息
如果需要其他环境 按照以上描述 创建 .env.[model]文件
（2）完成上面环境配置之后改写 package.json文件
命令配置信息
这里 需要注意的 是 --model 后面的参数 需要是 .env.[model] 文件 对应的 [model]
例如 .env.test 文件 那么 这里就是 --mode test
.env.prod 文件 那么 这里就是 --mode prod.
（3） 本地服务 代理的配置 如下图
代码配置信息
（4）api请求方法中的路径，如下图
请求路径带有data-service
结束语：如果还是接口不通，有可能和后台nginx配置有关系，需要请教后台开发人员啦。
网友评论