Vue项目分环境打包的实现步骤


Posted in Javascript onApril 02, 2018

在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。网上搜集了许多资料,现在可以分环境打包程序了,至于怎么打,接着住下看吧。

第1步:安装cross-env

在项目目录下运行如下命令安装cross-env,我的ide是webstorm,要以直接在ide里的Terminal窗口中运行,也可能通过windows的CMD、Linux的Terminal定位到项目根目录运行下面的命令。

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()
//更多的其它内容,不需要做任何调整的内容 ...

补充:

vue2+webpack怎样分环境打包

今年有机会做了一个vue2的单页面应用的项目,从开发到上线经历了两个环境。测试环境以及正式环境我都是跑npm run build。这两个环境的变量当前是不一样的,每次打包都要去改变量,感觉有点小麻烦。后来参考同事的,他们项目里面分环境跑不同的命令,得到不同的包。例如测试环境npm run test ,正式环境 npm run build。

需在文件config/prod.env.js配置

const target = process.env.npm_lifecycle_event;
if (target == 'test') {

//测试

var obj = {

NODE_ENV: '"production"',

//post用当前域名

API_ROOT: '""',

//数据字典

API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',

}
}else {

//线上

var obj = {

NODE_ENV: '"production"',

//post用当前域名

API_ROOT: '""',

//数据字典

API_ROOT_DICT:'"http://gw.fdc.com.cn"',

}
}
module.exports = obj;

npm 提供一个npm_lifecycle_event变量,返回当前正在运行的脚本名称,比如pretest、test、posttest等等。所以,可以利用这个变量,在同一个脚本文件里面,为不同的npm scripts命令编写代码。

总结

以上所述是小编给大家介绍的Vue项目分环境打包的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
详解webpack-dev-server的简单使用
Apr 02 #Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
vue计算属性及使用详解
Apr 02 #Javascript
You might like
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
js 判断 enter 事件
2009/02/12 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
ext jquery 简单比较
2010/04/07 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Django实现分页显示效果
2019/10/31 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
银行批评与自我批评
2014/02/10 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
培训科主任岗位职责
2014/08/08 职场文书
质量月活动总结
2014/08/26 职场文书
预备党员个人总结
2015/02/14 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
Django drf请求模块源码解析
2021/06/08 Python