环境变量配置

1. 我们在vue项目开发中，项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量 环境一般分为开发环境，测试环境，生产环境
2. 在根目录下的package.json里的scripts配置serve test build通过--mode xxx来执行不同环境

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

3. 在项目根目录中新建三个文件
   

• env.development // 开发环境
• env.production // 生产环境
• env.testing // 测试环境
  然后分别在这3个文件中依次写入：

​NODE_ENV = “development” ----------- 开发环境配置
NODE_ENV = “production” -------------生产环境配置
NODE_ENV = “testing” --------------- 测试环境配置

• 配置的变量一般为VUE_APP_开头可以通过process.env.VUE_APP_来访问(列如:VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问)
• 除了VUE_APP_*变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

4. 在根目录下的src文件中，新建一个config文件夹，并创建三个对应文件，专门用来保存我们的环境变量 这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？
   修改起来方便，不需要重启项目，符合开发习惯。
   config/index.js

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

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

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

5. 在我们根目录下的src文件内main.js文件中引入

import {baseUrl} from "./config/index";
// 因为导出的是一个对象，结构赋值
console.log(baseUrl);

**注意:**如果测试环境时，需要额外配置一个js文件 在根目录下创建vue.config.js文件，然后写入

module.exports = {
  publicPath: "./"
  // 路径都换为 ./
};