關於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
})

后續補充