1、在build文件夹下新建test.js,内容复制同级目录下的build.js,修改两个地方

'use strict'
require('./check-versions')()
// 修改1
process.env.NODE_ENV = 'test'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
// 修改2
const webpackConfig = require('./webpack.test.conf')

2、在build文件夹下新建webpack.test.conf.js,内容复制同级目录下的webpack.prod.conf.js,修改一个地方

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 修改
const env = require('../config/test.env')

3、在config文件夹下新建test.env.js,内容复制同级目录下的prod.env.js,修改一个地方

'use strict'
module.exports = {// 修改NODE_ENV: '"test"'
}

4、编辑build文件夹下webpack.base.conf.js,修改一个地方

output: {path: config.build.assetsRoot,filename: '[name].js',// 修改publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'? config.build.assetsPublicPath: config.dev.assetsPublicPath
},

5、编辑build文件夹下utils.js,修改一个地方

exports.assetsPath = function (_path) {// 修改const assetsSubDirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'? config.build.assetsSubDirectory: config.dev.assetsSubDirectoryreturn path.posix.join(assetsSubDirectory, _path)
}

6、编辑config文件夹下index.js,修改两个地方

build: {// 修改1index: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test/index.html') : path.resolve(__dirname, '../dist/index.html'), // 线上测试环境和线上正式环境入口文件路径区分// 修改2assetsRoot: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test') : path.resolve(__dirname, '../dist'), // 线上测试环境和线上正式环境打包后文件区分assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: true,devtool: '#source-map',// npm install --save-dev compression-webpack-plugin@1.12.0productionGzip: true,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}

7、编辑package.json文件,修改三处

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",// 打正式包,打包后文件在dist文件夹下"build:prod": "node build/build.js",// 打测试包,打包后文件在test文件夹下"build:test": "node build/test.js",// 打正式包和测试包"build": "npm run build:prod && npm run build:test"
},

8、 打包时运行npm run build即可打测试包和正式包。如果只需要测试包,则执行npm run build:test;如果只需要正式包,则执行npm run build:prod

那么,在nginx配置代理的时候,测试服务器应该代理到test/文件夹,正式服务器应该代理到dist/文件夹。 在开发的时候,可以用process.env.NODE_ENV的值来判断运行环境:开发环境development测试环境test生产环境production。而不应该通过location.hostname来判断运行环境了。

打线上包 测试_vue-cli项目分别打测试包(test)和生产包(prod)相关推荐

  1. 18、最近很火的线上脱单盲盒项目(内附功能搭建源ma)

    本次分享为线上脱单盲盒搭建源码,免费领取已放文章结尾处 其实和线下那种一元放微信,一元拿微信一样,线上只是流量大一点. 然后9.9元成为红娘为亮点,吸引别人来进行宣传推广. 很多人就是看到了这么火,那 ...

  2. java maven 打包jar_maven项目如何打jar包?eclipse将maven项目打包成jar包方法

    下面的内容是要给大家介绍eclipse将maven项目打包成jar包的方法,一起来看看整个过程是怎样的吧,希望对你的编程之路可以有所帮助哦. 利用eclipse把项目打包成jar,放入服务器执行. 1 ...

  3. 【AI测试】推荐系统项目--菜谱推荐测试

    推荐系统项目–菜谱推荐测试 本文主要介绍菜谱推荐项目个人的测试思路.此项目不同于像淘宝,亚马逊,抖音这样的推荐,一没这么大的用户量,二也没那么多内容,所以有些测试方法会不适用些项目,测试方法也较大不同 ...

  4. idea打包war包,将自己的项目打包为war包

    嘿嘿嘿,看不懂欢迎私聊  本人球球号哦   da19d58fc1d98b6e3e449c4d3ff3ea6c  使用md5加密 https://blog.csdn.net/wn084/article/ ...

  5. 线上故障等级和处理规范,看阿里测试工程师如何拿捏

    一.前言 对于每一个测试人员来说,软件测试过程中有一个四字成语,真的是如噩梦一般的存在,会在你不注意的时候,就突然蹦出来,劳你筋骨.空乏你身.乱你心神.行拂乱你所为,那就是--线上故障. 线上故障顾名 ...

  6. 软件测试面试中关于线上bug,线上出现bug测试人员怎么办

    常在河边走,哪能不湿鞋,即使测试在工作中已经小心再小心了,但有时还是可能会出现线上问题,真是个悲伤的故事,然而纵然悲伤也需要有个结局,那么项目上线出现bug,测试人员该肿么办呢? 首先要做的是重现这个 ...

  7. 测试金融软件出现线上bug的原因及解决方法

    小编热衷于收集整理资源,记录踩坑到爬坑的过程.希望能把自己所学,实际工作中使用的技术.学习方法.心得及踩过的一些坑,记录下来.也希望想做软件测试的你一样,通过我的分享可以少走一些弯路,可以形成一套自己 ...

  8. 阿里云线上部署自己的写的小项目

    unbuntu20.0.4线上部署自己写的项目(laravel+vue) 这周把自己写的菜鸡项目,仿小米商城部署到线上 系统unbuntu20.0.4大致流程及bug记录 一.搭建环境 1.安装Apa ...

  9. Auty 2017——WebMonitor接口线上检测平台

    [本文出自天外归云的博客园] Auty 2017--WebMonitor接口检测平台 前篇 接口本地检测平台 本篇 接上篇,在本地检测平台的基础上,去掉本地服务,改功能为线上使用.好处是项目可以多人访 ...

最新文章

  1. KeyValueTextInputFormat使用案例
  2. 集合-ArrayList
  3. vue路由跳转 返回上一级 this.$router.go(-1) 和返回到指定页面this.$router.push('/home')...
  4. java扫雷随机地雷_原创扫雷(未添加随机分布地雷),想看就进来看下吧
  5. 2020牛客多校第1场I-1 or 2一般图最大匹配带花树
  6. 自动化测试工具selenium python_Selenium自动化测试工具使用方法汇总
  7. java你画我猜源码_为什么看到Mybatis源码就感到烦躁?
  8. [React] 尚硅谷 -- 学习笔记(五)
  9. 上海交通大学软件学院2005学年度第一学期工程硕士课程安排表
  10. 查询出两个表中不同的数据
  11. 【pytorch】pytorch-LSTM
  12. POJ3421:X-factor Chains——题解
  13. GBin1推荐:jQuery的滚动插件Waypoints
  14. 计算机毕业设计安卓旅游APP源码
  15. OCR开源代码库介绍
  16. 镇江市第一届软件设计大赛参赛作品简单记录
  17. 支付机构违规已成常态 盛付通再次被央行处罚
  18. SDI相机实时采集处理DSP系统 目标跟踪
  19. Mac版 Adobe PS CC 2019 安装教程
  20. Hook淘宝X-SIGN

热门文章

  1. SQL Server 2014 新建数据库
  2. 基于八叉树的区域增长点云分割算法
  3. 数据仓库流程和代码说明
  4. MVC一个action对应多个视图的写法
  5. 配置nginx,Tomcat日志记录请求耗时
  6. tomcat并发数设置
  7. 2025年全球5G室内无线市值将达5.09亿美元
  8. Android源码模块编译
  9. CentOS6_mini_安装后基本配置
  10. OpenGL中的投影使用