浅析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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
用Vue写一个分页器的示例代码
Apr 22 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
JS使用for in有序获取对象数据
May 19 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
用ODBC的分页显示
2006/10/09 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
VueJS全面解析
2016/11/10 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
Python自动扫雷实现方法
2015/07/25 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
深入理解Python 多线程
2020/06/16 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
医院院务公开实施方案
2014/05/03 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL