详解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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
Angular的MVC和作用域
Dec 26 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
React实现评论的添加和删除
Oct 20 Javascript
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
MVC模式的PHP实现
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
中医专业应届生求职信
2013/11/17 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
语文教研活动总结
2014/07/02 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python