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: "./"
// 路径都换为 ./
};