浅析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的求爱小特效
May 09 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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中目录,文件操作详谈
2007/03/19 PHP
php 设计模式之 单例模式
2008/12/19 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php实现的CSS更新类实例
2014/09/22 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php压缩文件夹最新版
2018/07/18 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
详解python算法之冒泡排序
2019/03/05 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
租房协议书样本
2014/08/20 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
python Polars库的使用简介
2021/04/21 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏