关于vue2多环境配置

前端开发过程中，我们会遇到多环境调试、插件调用和多个代理、跨域问题等情况，下面我们来配置下，不同的环境下，统一的跨域问题解决，提高开发效率。

1、根目录下新建三个环境的配置文件，分别命名为：

.env.development
.env.test
.evn.production

注意env前有英文的句号

2、开发环境 .env.development

# 开发环境
NODE_ENV = 'development'

# 开发环境，默认BASEURL
VUE_APP_BASE_URL = '/api'

# 开发环境，API前缀
VUE_APP_BASE_API = '/api'

#开发环境，Url地址
VUE_APP_BASE_TARGET = 'http://10.10.2.241:9000/'

3、测试环境 .env.test

# 测试环境
NODE_ENV = 'test'

# 测试环境，默认BASEURL
VUE_APP_BASE_URL = '/api/test'

# 测试环境，API前缀
VUE_APP_BASE_API = '/test'

# 测试环境，Url地址
VUE_APP_BASE_TARGET = 'https://xxxxx.xxxxxx.com/'

4、生产环境 .env.production

# 正式环境
NODE_ENV = 'production'

# 生产环境，默认BASEURL
VUE_APP_BASE_URL = '/api/production'

# 生产环境，API前缀
VUE_APP_BASE_API = '/production'

#生产环境，Url地址
VUE_APP_BASE_TARGET = 'https://xxxx.xxxxx.com/'

5、需要在package.json项目元信息文件中对脚本命令配置mode。

"scripts": {
  "serve": "vue-cli-service serve",
  "serve:test": "vue-cli-service serve --mode test",
  "build": "vue-cli-service build --mode production",
  "lint": "vue-cli-service lint"
}

6、然后在vue.config.js代理中使用

proxy: { //配置多个跨域
  [process.env.VUE_APP_BASE_API]: {
    target: process.env.VUE_APP_BASE_TARGET,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: ''
      }
  }
}

7、在axios配置中使用

const instance = axios.create({
	// '/api/tcc-mobileLib'
	baseURL: process.env.VUE_APP_BASE_URL,
	timeout: 30000,
	headers: {
		'Content-Type': 'application/json;charset=UTF-8'
	},
	withCredentials: true //允许携带cookie
})