浅析vue给不同环境配置不同打包命令


Posted in Javascript onAugust 17, 2018

第1步:安装cross-env

npm i --save-dev cross-env

第2步:修改各环境下的参数

在config/目录下添加test.env.js、pre.env.js。

修改prod.env.js里的内容,修改后的内容如下:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"',
 API_ROOT:'"/apis/v1"'
}

分别对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"'
}

对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('./prod.env'),
 preEnv: require('./pre.env'),
 testEnv: require('./test.env'),
 //下面为原本的内容,不需要做任何个性
 index:path.resolve(__dirname,'../dist/index.html'),

第5步:在webpackage.prod.conf.js中使用构建环境参数  

对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。

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

第6步:调整build/build.js

删除process.env.NODE_ENV的赋值,修改spinner的定义,调整后的内容如下:

'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const 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()
//更多的其它内容,不需要做任何调整的内容 ...

最后:

执行npm run build:test打包的就是测试环境

执行npm run build:prod打包的就是生产环境

总结

以上所述是小编给大家介绍的vue给不同环境配置不同打包命令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 #Javascript
layer弹出层全屏及关闭方法
Aug 17 #Javascript
vue+iview+less 实现换肤功能
Aug 17 #Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
You might like
提高php运行速度的一些小技巧分享
2012/07/03 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
酒吧创业计划书
2014/01/18 职场文书
2014年大学生自我评价
2014/01/19 职场文书
篮球比赛策划方案
2014/06/05 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server