vue配置不同环境常量

8/20/2021 Vue工作采坑

# 新增配置文件

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

# 小结

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

Last Updated: 8/20/2021, 5:31:07 PM