vue測試框架,打線上包 測試_vue-cli項目分別打測試包(test)和生產包(prod)

 2023-11-11 阅读 20 评论 0

摘要:1、在build文件夾下新建test.js,內容復制同級目錄下的build.js,修改兩個地方'use strict' require('./check-versions')() // 修改1 process.env.NODE_ENV = 'test' const ora = require('ora') const rm = requir

8e450c814e7f1273413593127e4edda7.png

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

3ac61737a07caf59c4a88723b7413da4.png

那么,在nginx配置代理的時候,測試服務器應該代理到test/文件夾,正式服務器應該代理到dist/文件夾。 在開發的時候,可以用process.env.NODE_ENV的值來判斷運行環境:開發環境development測試環境test生產環境production。而不應該通過location.hostname來判斷運行環境了。

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/5/171099.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息