浅析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 相关文章推荐
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
Vue计算属性的使用
Aug 04 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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 curl选项列表(超详细)
2013/07/01 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Javascript中的数学函数
2007/04/04 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python中正则表达式的使用方法
2018/02/25 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python