vue.config.js配置本地，测试，开发环境变量_vue.config配置环境变量

背景

当我们使用vue-cli3.0搭建项目时，相比于之前的vue-cli2.0少了build于config文件夹，所以vue-cli3.0提供了一个可选的配置文件----vue.config.js来对项目进行webpack的配置。最典型的一个配置就是接口配置，如：

// vue.config.js
module.exports = {
  // 是否生成map文件
  productionSourceMap: process.env.NODE_ENV === 'production' ? false : true, 
  // 接口api配置
  devServer: {
    proxy: {
      '/soc': {
        target: 'http://10.8.228.226',
        changeOrigin: true,
        onProxyReq (proxyReq, req, res) {
          proxyReq.setHeader('Cookie', 'ticket=ST-2237-ntnV2Q8073vcd4pHq3zfPoiJjlMbf5e3914-927d-410c-abb1-1f758090c523;SESSION=23690155-8703-4f1c-b964-faa9e206bf21;')
        }
      }
    }
  },
  // less样式配置
  css: {
    loaderOptions: {
      css: {},
      less: {
        javascriptEnabled: true
      }
    }
  }
}
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
26

而在实际项目的开发中，我们一般会经历几个阶段或者说是几个环境，比如：开发环境，测试环境，线上环境。每个环境下项目代码的要求也不完全一样，例如测试环境和线上环境当用户尚未登录的时候会自动跳转到登录页，但是测试环境和线上环境的登录页是不一样的，那么我们如何能够在这三个或者更多的环境下切换来实现项目展现不同的效果呢？特别是vue-cli3.0已经没有了build和config这样的文件夹。

环境配置

本地环境

vue.config.js平级目录下新建.env.development

// .env.development
NODE_ENV = 'development' // 这里可以不写，默认就是development
VUE_APP_NOTICE = 'dev'
1
2
3

测试环境

vue.config.js平级目录下新建.env.test

// .env.test
NODE_ENV = 'test'
VUE_APP_NOTICE = 'test'
1
2
3

线上环境

vue.config.js平级目录下新建.env.production

// .env.production
NODE_ENV = 'production'
VUE_APP_NOTICE = 'pro'
1
2
3

package.json配置

// package.json
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:test": "vue-cli-service build --mode test"
},
1
2
3
4
5
6

运行

此时我们就配置好了开发环境，测试环境和线上环境。我们可以在项目中通过process.env.[name]来访问我们定义的变量，如

// main.js
console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_NOTICE)
1
2
3

开发环境

当我们本地运行

npm run serve
1

时，输出的就是development，因为vue-cli-service serve命令默认设置的环境就是development。

测试环境

当我们运行

npm run build:test
1

时，webpack会读取.env.test文件下的配置（如果没有找到对应的配置文件，会默认使用开发环境的配置）

线上环境

当我们运行

npm run build
1

时，vue-cli-service build会使用默认环境 production。

此时我们就可以通过process.env.NODE_ENV和process.env.VUE_APP_NOTICE在项目中对不同环境进行不同操作。

注意

当我们配置环境变量时候，除了process.env已有的baseUrl和NODE_ENV可以更改值，对于我们想要自定义添加的环境变量必须使用VUE_APP开头。

附录

权威说明可以参考Vue CLI给出的文档