多环境变量配置

目录

 

Ⅰ、第一步

Ⅱ、第二步

Ⅲ、第三步

Ⅳ、第四步

 

---

Ⅰ、第一步
 

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

如下：

​

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}


​

我们根据不同的启动方式来启用不同的域。

Ⅱ、第二步

我们在根目录下创建3个文件分别是 

.env.development // 开发环境

.env.production // 生产环境

env.testing // 测试环境

如下：

 

然后在这3个文件中写入： 

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

Ⅲ、第三步

① 在根目录下的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: "./"
  // 路径都换为 ./
};