介绍
这篇文章将为大家详细讲解有关如何在vue中给不同环境配置不同的打包命令,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>第1步:安装cross-env
<代码> npm我——save-dev cross-env
<强>第2步:修改各环境下的参数
在配置/目录下添加test.env.js, pre.env.js。
修改prod.env。js里的内容,修改后的内容如下:
& # 39; use 严格# 39;
module.exports =, {
,NODE_ENV: & # 39;“production" & # 39;
,EVN_CONFIG: & # 39;“prod" & # 39;
,API_ROOT: & # 39;“/api/v1" & # 39;
} 分别对test.env.js和pre.env。js文件内容进修修改,修改后的内容如下:
& # 39; use 严格# 39;
module.exports =, {
,NODE_ENV: & # 39;“testing" & # 39;
,EVN_CONFIG: & # 39;“test" & # 39;
,API_ROOT: & # 39;“/测试/api/train" & # 39;
}
& # 39;use 严格# 39;
module.exports =, {
,NODE_ENV: & # 39;“presentation" & # 39;
,EVN_CONFIG: & # 39;“pre" & # 39;
,API_ROOT: & # 39;“/pre/api/train" & # 39;
} 对dev.env。js文件内容进行修改,修改后的内容如下.dev环境配制了服务代理,API_ROOT前的api是配制的代理地址。
module.exports =,合并(prodEnv, {
,NODE_ENV: & # 39;“development" & # 39;
,VN_CONFIG: & # 39;“dev" & # 39;
,API_ROOT: & # 39;“api/api/v1" & # 39;
}) <强>第3步:修改项目package.json文件
对包。json文件中脚本的内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。
“scripts":, {
,“dev":“webpack-dev-server ——inline ——progress ——config 构建/webpack.dev.conf.js"
,“时:“npm run dev"
,“build":“node 构建/build.js"
,“构建:test":,“cross-env NODE_ENV=production env_config=test node 构建/build.js"
,“构建:pre":,“cross-env NODE_ENV=production env_config=pre node 构建/build.js"
,“构建:prod":,“cross-env NODE_ENV=production env_config=prod node 构建/build.js"
}, 在这里,NODE_ENV最好都设成生产,因为在utils.js只做了生产一种判定,亲测不会影响各环境API参数。
<强>第4步:修改配置/index.js
修改配置/index.js文件中建立参数,这里的参数会在构建/webpackage.prod.conf。js中使用到
构建:{
,//Template for index . html
,//添加test pre prod 三处环境的配制
,prodEnv:要求(& # 39;。/prod.env& # 39;),
,preEnv:要求(& # 39;。/pre.env& # 39;),
,testEnv:要求(& # 39;。/test.env& # 39;),
,//下面为原本的内容,不需要做任何个性
,指数:path.resolve (__dirname & # 39; . ./dist/index . html # 39;), <强>第5步:在webpackage.prod.conf。js中使用构建环境参数
对构建/webpackage.prod.conf。js文件进行修改,调整env常量的生成方式。
//,个性env常量的定义//,const env =,要求(& # 39;. ./config/prod.env& # 39;)
const env =, config.build [process.env.env_config + & # 39; env # 39;] <强>第6步:调整构建/构建。js
删除process.env。NODE_ENV的赋值,修改转轮的定义,调整后的内容如下:
& # 39; use 严格# 39;
要求(& # 39;。/check-versions& # 39;) ()//,注释掉的代码=//,process.env.NODE_ENV & # 39;生产# 39;
const ora =,要求(& # 39;奥拉# 39;)
const rm =,要求(& # 39;rimraf& # 39;)
const path =,要求(& # 39;path & # 39;)
const chalk =,要求(& # 39;粉笔# 39;)
const webpack =,要求(& # 39;webpack& # 39;)
const config =,要求(& # 39;. ./配置# 39;)
const webpackConfig =,要求(& # 39;。/webpack.prod.conf& # 39;)//,修改转轮的定义//,const spinner =,奥拉(& # 39;building for 生产……& # 39;)
var spinner =,奥拉(& # 39;building for & # 39;, +, process.env.NODE_ENV +, & # 39;, of & # 39;, +, process.env.env_config +, & # 39;,模式…& # 39;,)
spinner.start ()//更多的其它内容,不需要做任何调整的内容,… 最后:
执行npm运行构建:测试打包的就是测试环境
执行npm运行构建:刺激打包的就是生产环境
关于如何在vue中给不同环境配置不同的打包命令就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
