浅析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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js创建对象的方式总结
Jan 10 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
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扩展编写点滴 技巧收集
2010/03/09 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python获取txt文件词向量过程详解
2019/07/05 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
经典c++面试题四
2015/05/14 面试题
高级电工工作职责
2013/11/21 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
效能风暴心得体会
2014/09/04 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
大学生自荐材料范文
2014/12/30 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
python实现简易名片管理系统
2021/04/11 Python
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js