在新建好的项目中,一般执行npm运行构建就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下:
文件结构如下图:
1)在配置文件内新建test.env.js文件:
使用严格的
模块。出口={
NODE_ENV:“测试”,
ENV_CONFIG:““测试””
}
2)修改配置内的prod.env.js文件:
使用严格的
模块。出口={
NODE_ENV:“生产”,
ENV_CONFIG:“刺激”
}
3)对构建中webpack.prod.conf.js做如下修改:
//const env=要求(. ./config/prod.env)//原始代码
或者为
//const env=process.env。NODE_ENV==='测试'//原始代码//& # 63;要求(“. ./config/test.env”)//:要求(“. ./config/prod.env”)//console.log (process.env.NODE_ENV);
修改为:
const env=config.build [process.env。env_config + ' Env ']
4)配置中的指数。js文件中构建部分代码修改如下:
构建:{
prodEnv:要求(’。/prod.env '),
testEnv:要求(’。/test.env '),//index . html的模板
指数:路径。解决(__dirname . ./dist/index . html),//ぁぁぁび嘞碌拇刖筒恍戳?
}
5)确认安装cross-env
npm安装cross-env -save-dev
6)对构建文件夹下的build.js的修改:
使用严格的
要求(“。/check-versions”)()//process.env。NODE_ENV=?/注释掉
const ora=要求(“奥拉”)
const rm=要求(“rimraf”)
const path=要求(“路径”)
const粉笔=要求(“粉笔”)
const webpack=要求(“webpack”)
常量配置=要求(. ./配置)
const webpackConfig=要求(“。/webpack.prod.conf”)//const转轮=奥拉(建筑生产…)//注释掉
var转轮=奥拉(+ process.env“建筑”。NODE_ENV +的+ process.env。env_config +”模式……”)
spinner.start ()
7)修改package.json文件(在脚本里面添加):
"脚本":{
“开发”:“webpack-dev-server——内联——发展——配置构建/webpack.dev.conf.js”,
“开始”:“npm dev运行”,
“单位”:“开玩笑——配置测试/单位/jest.conf。js报道”,
“e2e”:“节点测试/e2e/runner.js”,
“测试”:“npm运行单元,,npm e2e运行”,
“棉絮”:“eslint, ext js。vue src/单元测试/e2e/测试规格”,
“构建”:“节点构建/build.js”,
“构建-测试”:“cross-env NODE_ENV=测试env_config=测试节点构建/build.js”,
:“构建——促使cross-env NODE_ENV=生产env_config=促使节点构建/build.js”
},
8)在常见的文件下新建js,对环境进行判断并切换,内容如下:
/*
*配置编译环境和线上环境之间的切换
* baseUrl:域名地址
* routerMode:路由模式
*/让baseUrl=";
让routerMode='历史';
让DEBUG=false;
让cancleHTTP=[];//取消请求头设置;//注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
如果(process.env。NODE_ENV=='发展'){
baseUrl=" https://10.248.65.100/GetTravelMethod ";
DEBUG=true;
如果(process.env}其他。NODE_ENV==?{
baseUrl=" https://10.248.65.200/GetTravelMethod ";
DEBUG=false;
如果(process.env}其他。NODE_ENV=='测试'){
baseUrl=" https://10.248.65.150/GetTravelMethod ";
DEBUG=false;
}
{出口
baseUrl,
routerMode,
调试、
的角色,
cancleHTTP
}
想要测试环境下则运行:
npm运行构建,测试
相应的改为生产环境则运行:
npm运行构建,促使
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
