详解vue.js根据不同环境(正式、测试)打包到不同目录


Posted in Javascript onJuly 13, 2018

1、在build文件夹中创建testing.js文件

// 配置环境变量 type 为 testing
process.env.type = '"testing"'
// 引入build.js文件
require('./build')

2、修改config文件夹中的prod.env.js文件

module.exports = {
 NODE_ENV: '"production"',
 // 将上文设置的环境变量,赋值到 type 属性上
 type: process.env.type
}

3、在package.json文件中添加npm run testing命令

"testing": "node build/testing.js", // 添加testing命令
"build": "node build/build.js"

4、config ->index.js中把build这个命令复制一份改成testing(此步为了打包到不同文件夹)

build: {
  env: require('./prod.env'),
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/mshop/',

  /**
   * Source Maps
   */

  productionSourceMap: true,
  // https://webpack.js.org/configuration/devtool/#production
  devtool: '#source-map',

  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],

  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },
 testing: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../testing/index.html'),
  assetsRoot: path.resolve(__dirname, '../testing'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },

5、修改build->webpack.prod.conf文件

修改filename

new HtmlWebpackPlugin({

   filename: process.env.type == '"testing"' ? config.testing.index : config.build.index
  }),

修改output

output: {
  path: process.env.type == '"testing"' ? config.testing.assetsRoot : config.build.assetsRoot,
 },

6、修改build->build.js文件

路径都修改为根据正式、测试环境判断(不然执行npm run testing, npm run build命令时输出的文件有问题)

rm(path.join(process.env.type == '"testing"' ? config.testing.assetsRoot : config.build.assetsRoot, process.env.type == '"testing"' ? config.testing.assetsSubDirectory : config.build.assetsSubDirectory), err => {

7、根据不同环境配置不同域名地址

let baseURL
if (process.env.NODE_ENV === 'production') {
 if (process.env.type === 'testing') { // 测试环境
  baseUrl = '测试环境地址'
 } else {               // 正式环境
  baseUrl = '正式环境地址'
 }
} else {                // 本地环境
 baseUrl = '本地环境地址'
}

最后执行:

npm run testing 就会执行测试环境配置的地址,并生成testing文件夹
npm run build就会执行正式环境配置的地址,并生成dist文件夹

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
AngularJS转换响应内容
Jan 27 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 #Javascript
vue实现组件之间传值功能示例
Jul 13 #Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 #Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 #Javascript
JS实现select选中option触发事件操作示例
Jul 13 #Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 #Javascript
You might like
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python生成器(Generator)详解
2015/04/13 Python
python集合用法实例分析
2015/05/30 Python
python @property的用法及含义全面解析
2018/02/01 Python
python实现学员管理系统
2019/02/26 Python
python实现对输入的密文加密
2019/03/20 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
大学活动邀请函
2014/01/28 职场文书
参赛口号
2014/06/16 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
暂停营业通知
2015/04/25 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书