新增配置文件

vue.config.js同级目录，新增三个配置文件 .env.dev（开发环境）, .env.test（测试环境）, .env.prod（生产环境），内容如下所示，必须以VUE_开头设置常量

.env.dev（开发环境）

# 开发环境
NODE_ENV = 'dev'

# 打包的目录名
VUE_APP_OUT_PUT_DIR = 'dev'

# 启动端口
VUE_APP_PORT = '8083'

# 后台接口地址
VUE_APP_BASE_API = 'http://localhost:8083/api/'

复制成功
1
2
3
4
5
6
7
8
9
10
11

.env.prod（测试环境）

# 开发环境
NODE_ENV = 'test'

# 打包的目录名
VUE_APP_OUT_PUT_DIR = 'test'

# 后台接口地址
VUE_APP_BASE_API = 'https://test.black.top/api/'

复制成功
1
2
3
4
5
6
7
8

.env.prod（开发环境）

# 开发环境
NODE_ENV = 'prod'

# 打包的目录名
VUE_APP_OUT_PUT_DIR = 'prod'

# 后台接口地址
VUE_APP_BASE_API = 'https://prod.black.top/api/'

复制成功
1
2
3
4
5
6
7
8

package.js文件配置


// 默认启动 npm sun serve/build 默认dev （可以根据自己情况） 
// 不同环境 npm run serve:dev/test/prod  

 "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode dev",
    "build:dev": "vue-cli-service build --mode dev",
    "serve:dev": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "serve:test": "vue-cli-service serve --mode test",
    "build:prod": "vue-cli-service build --mode prod",
    "serve:prod": "vue-cli-service serve --mode prod",
  }


复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

vue.config.js引用

module.exports = {

publicPath: './',

// 生成不同的 打包目录
outputDir: './dist/'+process.env.VUE_APP_OUT_PUT_DIR,
assetsDir: './public',
runtimeCompiler:true,
lintOnSave: false,  
devServer: {
  proxy: {
    '/api': {    //将www.example.com映射为/apis
      target: process.env.VUE_APP_BASE_API,
      secure: false,    // 如果是https接口，需要配置这个参数
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '' //需要rewrite的,
      }
    }
  }
},

}



复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

小结

当项目要不通环境来回测试，部署的时候，往往需要不停的修改一些公共变量，用不同的配置文件来管理，有效解决了这个问题，只需打包/运行的时候，使用不同的参数即可~

晓露寝安浅云逍遥十漾轻拟