多环境变量配置

1.首先我们在项目跟目录下找到package.json文件，在scripts中配置

package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production

"scripts": {
    "serve": "vue-cli-service serve", // 开发环境
    "build": "vue-cli-service build", // 生产环境
    "test": "vue-cli-service build --mode testing" // 测试环境
  },

2.然后在根目录下创建3个文件

然后在着3个文件中写入以下代码：

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

3.在根目录下的src文件中，新建一个config文件夹，专门用来保存我们的环境变量

在上面3个文件导出相应的baseUrl域名。
如：

module.exports = {

baseUrl:"http://www.development.com"

}

// 开发环境

然后在index.js中引入一下

const config = require("./env." + process.env.NODE_ENV);

// process.env.NODE_ENV 使用哪个方式运行，就会引入相应的baseUrl

module.exports = config;

// 然后导出

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

import {baseUrl} from "./config/index";

// 因为导出的是一个对象，结构赋值

console.log(baseUrl);

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

module.exports = {

publicPath: "./"

// 路径都换为 ./

};