前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题

本篇基于vue-cli2配置多环境

1. 配置一个运行时的环境

1.1 在config目录下新建环境变量

config目录下存放的是env环境变量js文件，新建一个自己的环境变量文件如dev_01.env.js。内容如下：

'use strict'
module.exports = {
  NODE_ENV: '"dev"',
  BASE_SERVER_URL: '"这是一个dev_01环境的地址"'
}

对象以键值对的方式存放，值为单引号引用的字符串，自己命名

1.2 在build文件夹下新建webpack文件

在build文件夹下新建一个名为webpack.dev-test.conf.js的文件，该文件复制于自带的编译文件webpack.prod.conf.js。修改文件内容地方如下图：

1.3 在package.json中配置运行命令

配置命令如下图：

1.4 运行测试

• 运行 npm run dev01

• 代码引用

  
  

• 结果

  
  页面结果

打印结果

2. 配置一个打包环境

2.1 在config目录下新建环境变量

config目录下存放的是env环境变量js文件，新建一个自己的环境变量文件如prod-test.env.js。内容如下：

'use strict'
module.exports = {
  NODE_ENV: '"pro"',
  BASE_SERVER_URL: '"这是一个prod-test环境的地址"'
}

对象以键值对的方式存放，值为单引号引用的字符串，自己命名

2.2 在build文件夹下新建webpack文件

在build文件夹下新建一个名为webpack.prod-test.conf.js的文件，该文件复制于自带的编译文件webpack.prod.conf.js。修改文件内容地方如下图：

2.3 在build文件夹下创建build文件

在build文件夹下创建一个build文件，用于build时的一些配置。如新建一个build-test.js文件，文件内容复制于自带的build.js文件。文件内容修改如下：

build-test.js

2.4 在package.json中配置运行命令

配置命令如下图：

package.json

2.5 运行测试

• 运行命令npm run build-test

• 代码引用

  
  

• 结果

  
  结果

3. 总结

vue-cli2的多环境配置比vue-cli3要复杂。需要在config和build文件夹中添加js文件配置。而vue-cli3只需要在根目录配置.env文件，并且在package.json文件中配置编译命令即可。

4. 源码地址

https://github.com/HyFun/Vue-Sample-Multiple-Environment-V2