多环境变量配置

多环境变量配置

1.首先在package.json里面找到，scripts在里面写入"serve",“test”,“build”, 通过–mode xxx来执行不同的环境
通过npm run xxx 来执行不同的程序，打包，测试，以及启用本地
在package.json中的代码：

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test":"vue-cli-service --mode testing"
  },

2.在根目录下创建 .env.

①.env.testing测试环境变量

NODE_ENV='testing'
VUE_APP_ENV='testing'

②.env.production 正式环境变量

NODE_ENV='production'
VUE_APP_ENV='production'

③.env.development 本地开发环境配置

NODE_ENV='development'
VUE_APP_ENV='development'

3在文件夹src中创建一个config文件夹，里面写入统一对.env.管理的js
注：既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？
修改起来方便，不需要重启项目，符合开发习惯。
1)先写一个index.js文件

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

2)在分别创建env.development.js 、env.testing.js 、 env.production.js
①env.development.js

// 本地环境配置
module.exports = {
	title: 'vue-h5-template',
  	baseUrl: 'http://localhost:9018', // 项目地址
  	baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  	APPID: 'xxx',
  	APPSECRET: 'xxx'
}

②env.testing.js

// 本地环境配置
module.exports = {
  	title: 'vue-h5-template',
  	baseUrl: 'http://localhost:9018', // 项目地址
  	baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  	APPID: 'xxx',
  	APPSECRET: 'xxx'
}

③env.production.js

// 本地环境配置
module.exports = {
  	title: 'vue-h5-template',
  	baseUrl: 'http://localhost:9018', // 项目地址
  	baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  	APPID: 'xxx',
  	APPSECRET: 'xxx'
}

4.在全局中引入你所配置的文件
在main.js中

import { baseUrl } from './config/index';
console.log(baseUrl);