菜单

js_脚本之家

2020年4月5日 - 首页

在当今左右端抽离,各个框架盛行的前端界,对项目标卷入须求也尤其复杂,自身分享多个vue项目里,依据命令行输入区别的吩咐,打包出不相同条件域名的主意。

在项目支出中,咱们的品类通常分为开采版、测量试验版、Pre版、Prod版。Vue-cli的暗中认可境况四头有dev和prod三个,以前每一趟要颁发测验版或Pre版都以改良了源码中API地址后装进,那样很辛苦。借使能依据不相同情况打包就无一不备了。网络搜聚了比很多材料,未来能够分条件打包程序了,至于怎么打,接着住下看呢。

  1. 安装插件
    cross-env,npm install cross-env --save -dev,用于配置命令行输入指令。

  2. 修改package.json里的script命令:

第1步:安装cross-env

布置了test,prod两种情况,npm run build 暗中认可设置成 npm run
build:prod,也得以依据本人要求,配置更加多的命令,参数自定。网络来看有人去矫正NODE_ENV那个暗中认可的参数,配置文件里有那多少个地方都援引了那几个参数。自己感觉那些暗许参数能够不改,自身再也充实一个参数就能够。

在项目目录下运转如下命令安装cross-env,小编的ide是webstorm,要以直接在ide里的Terminal窗口中运作,也或许通过windows的CMD、Linux的Terminal定位到品种根目录运维下边的吩咐。

"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "build": "npm run build:prod", "build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js", "build:ready": "cross-env NODE_ENV=production BUILD_ENV=ready node build/build.js", "build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js" },

npm i --save-dev cross-env

  1. 改进config目录下的prod.env.js

第2步:纠正各意况下的参数

在那之中的私下认可配置是这么:独有八个NODE_js_脚本之家。ENV

在config/目录下加多test.env.js、pre.env.js。改良prod.env.js里的内容,改正后的内容如下:

'use strict'module.exports = { NODE_ENV: '"production"', }

'use strict'const BUILD_ENV = process.env.BUILD_ENVlet baseUrl switch  { case 'test': baseUrl = 'api.test.com' break; case 'ready': baseUrl = 'api.ready.com' break; case 'prod': baseUrl = 'api.prod.com' break;}module.exports = { NODE_ENV: '"production"', BUILD_ENV: '"' + BUILD_ENV + '"', baseUrl: '"' + baseUrl + '"',}
'use strict'module.exports = { NODE_ENV: '"production"', EVN_CONFIG:'"prod"', API_ROOT:'"/apis/v1"'}

改革的配置扩展了BUILD_ENV和baseUrl两本特性,属性值记得拼接双引号
,process.env.BUILD_ENV正是命令行里输入的BUILD_ENV的值,再根据BUILD_ENV进展对应的推断。在品种里,就能够透过process.env获得prod.env.js暴流露来的3个个性。例如接口文件,就须要process.env.baseUrl来动态纠正分歧条件域名。

分别对test.env.js和pre.env.js文件内容进修改进,修正后的故事情节如下:

总结

'use strict'module.exports = { NODE_ENV: '"testing"', EVN_CONFIG:'"test"', API_ROOT:'"/test/apis/train"'}'use strict'module.exports = { NODE_ENV: '"presentation"', EVN_CONFIG:'"pre"', API_ROOT:'"/pre/apis/train"'}

以上所述是小编给大家介绍的vue项目中利用webpack动态配置打包两种条件域名的章程,希望对我们全数利于,若是我们有其余疑问请给自家留言,作者会及时还原我们的。在这里也非常多谢大家对剧本之家网址的支撑!假诺您以为本文对您有帮带,应接转发,烦请申明出处,感激!

对dev.env.js文件内容进行改造,修正后的剧情如下。dev碰着配制了劳务代办,API_ROOT前的api是配制的代办地址。

module.exports = merge(prodEnv, { NODE_ENV: '"development"', VN_CONFIG: '"dev"', API_ROOT: '"api/apis/v1"'})

第3步:纠正项目package.json文件

对package.json文件中的scripts内容开展本性,增添上新定义的三种情状的打包进度,里的参数与前面包车型客车调协保持一致。

"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" },

在这里,NODE_ENV最佳都设成production,因为在utils.js只做了production一种判断,亲测不会影响各碰着API参数。
##第4步:修改config/index.js

修正config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中选择到

build:{ // Template for index.html // 添加test pre prod 三处环境的配制 prodEnv: require, preEnv: require, testEnv: require, //下面为原本的内容,不需要做任何个性 index:path.resolve(__dirname,'../dist/index.html'),

第5步:在webpackage.prod.conf.js中行使创设意况参数

对build/webpackage.prod.conf.js文件举行改进,调治env常量的变通形式。

// 个性env常量的定义// const env = requireconst env = config.build[process.env.env_config+'Env']

第6步:调整build/build.js

删除process.env.NODE_ENV的赋值,修改spinner的定义,调解后的剧情如下:

'use strict'require// 注释掉的代码// process.env.NODE_ENV = 'production'const ora = requireconst rm = requireconst path = requireconst chalk = requireconst webpack = requireconst config = requireconst webpackConfig = require('./webpack.prod.conf')// 修改spinner的定义// const spinner = ora('building for production...')var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )spinner.start()//更多的其它内容,不需要做任何调整的内容 ...

补充:

vue2+webpack怎么样分条件打包

二零一六年有时机做了三个vue2的单页面应用的花色,从开垦到上线资历了四个情况。测量检验情形以致专门的学业碰到本身都以跑npm
run
build。那多少个意况的变量当前是不相似的,每回打包都要去改动量,感觉有一些小麻烦。后来参照他事他说加以考查同事的,他们项目里面分条件跑分裂的下令,得到区别的包。比方测量试验情状npm
run test ,正式情形 npm run build。

需在文书config/prod.env.js配置

const target = process.env.npm_lifecycle_event; if  { //测试 var obj = { NODE_ENV: '"production"', //post用当前域名 API_ROOT: '""', //数据字典 API_ROOT_DICT:'"http://test.gw.fdc.com.cn"', }}else { //线上 var obj = { NODE_ENV: '"production"', //post用当前域名 API_ROOT: '""', //数据字典 API_ROOT_DICT:'"http://gw.fdc.com.cn"', }}module.exports = obj;

npm
提供二个npm_lifecycle_event变量,再次回到当前正在运维的剧本名称,比方pretest、test、posttest等等。所以,能够行使那么些变量,在同贰个剧本文件之中,为分裂的npm
scripts命令编写代码。

总结

上述所述是笔者给咱们介绍的Vue项目分条件打包的兑今世码,希望对大家有所扶助,假使咱们有任何疑问请给自己留言,作者会及时苏醒大家的。在那也特别感激大家对台本之家网址的支撑!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图