移动端打包成功后禁止生成 report.html 文件，并不自动打开该文件

目录

  • 【问题】移动端 `npm run build` 打包后生成并打开 `report.html` 文件
    • `package.json` 文件
    • `vue.config.js` 代码
  • 【解决】打包后去除 `report.html` 文件
    • `vue.config.js` 代码
  • 参考

【问题】移动端 npm run build 打包后生成并打开 report.html 文件

在这里插入图片描述
在这里插入图片描述

package.json 文件

{"name": "hzcdt-zhuji-h5","version": "0.0.1","description": "A vue h5 template with Vant UI","author": "Sunnie <sunniejs@163.com>","private": true,"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","stage": "vue-cli-service build --mode staging","lint": "vue-cli-service lint"},"dependencies": {"axios": "^0.19.2","core-js": "^3.6.4","dayjs": "^1.11.10","echarts": "^5.4.2","good-storage": "^1.1.1","lib-flexible": "^0.3.2","lodash": "^4.17.15","lodash.clonedeep": "^4.5.0","lodash.throttle": "^4.1.1","regenerator-runtime": "^0.13.5","vant": "^2.10.2","vconsole": "^3.15.0","vue": "^2.6.11","vue-esign": "^1.1.4","vue-router": "^3.2.0","vuex": "^3.4.0"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","babel-eslint": "^10.1.0","babel-plugin-import": "^1.13.0","babel-plugin-transform-remove-console": "^6.9.4","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","node-sass": "^4.14.1","postcss-pxtorem": "^5.1.1","sass-loader": "^8.0.2","script-ext-html-webpack-plugin": "^2.1.4","vue-template-compiler": "^2.6.11","webpack-bundle-analyzer": "^3.8.0"}
}

vue.config.js 代码

'use strict'
const path = require('path')
const defaultSettings = require('./src/config/index.js')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 【主要代码】const resolve = dir => path.join(__dirname, dir)
// page title
// const name = defaultSettings.title || 'vue mobile template'
const name = defaultSettings.title || ''
// 生产环境，测试和正式
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const loginTarget = 'http://192.168.0.xx:9181' // 公司 移动端 环境
const serviceTarget = 'http://192.168.0.xx:9000' // 公司环境 业务接口module.exports = {// parallel: false,publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用//  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用outputDir: 'dist-ding', //  生产环境构建文件的目录assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录lintOnSave: !IS_PROD,productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。devServer: {port: 9020, // 端口open: false, // 启动后打开浏览器overlay: {//  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层warnings: false,errors: true},proxy: {// 配置跨域'/personnel_manager': {target: loginTarget,changOrigin: true},'/supervise_basic': {target: loginTarget,changOrigin: true},'/subsys_proxy': {target: serviceTarget,changOrigin: true// pathRewrite: {//   '^/subsys_proxy': '/'// }},'/supervise_zfjg': {target: serviceTarget + '/api/',changOrigin: true},'/sys_service_proxy': {target: serviceTarget,changOrigin: true},'/blood_manager': {target: loginTarget,changOrigin: true},'/oss': {// target: 'http://192.168.0.131:8077'target: 'http://192.168.0.xx:9000'}}},css: {extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。sourceMap: false,loaderOptions: {scss: {// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loadersprependData: `@import "assets/css/mixin.scss";@import "assets/css/variables.scss";$cdn: "${defaultSettings.$cdn}";`}}},configureWebpack: config => {config.name = name// 为生产环境修改配置...// if (IS_PROD) {//   // externals//   config.externals = externals// }},chainWebpack: config => {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// 别名 aliasconfig.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('api', resolve('src/api')).set('views', resolve('src/views')).set('components', resolve('src/components'))/*** 添加CDN参数到htmlWebpackPlugin配置中*/// config.plugin('html').tap(args => {//   if (IS_PROD) {//     args[0].cdn = cdn.build//   } else {//     args[0].cdn = cdn.dev//   }//   return args//  })/*** 设置保留空格*/config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {options.compilerOptions.preserveWhitespace = truereturn options}).end()/*** 打包分析*/if (IS_PROD) {// 【主要代码】config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{analyzerMode: 'static'}])}config// https://webpack.js.org/configuration/devtool/#development.when(!IS_PROD, config => config.devtool('cheap-source-map'))config.when(IS_PROD, config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// 将 runtime 作为内联引入不单独存在inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块commons: {name: 'chunk-commons',test: resolve('src/components'),minChunks: 3, //  被至少用三次以上打包分离priority: 5, // 优先级reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。},node_vendors: {name: 'chunk-libs',chunks: 'initial', // 只打包初始时依赖的第三方test: /[\\/]node_modules[\\/]/,priority: 10},vantUI: {name: 'chunk-vantUI', // 单独将 vantUI 拆包priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的test: /[\\/]node_modules[\\/]_?vant(.*)/}}})config.optimization.runtimeChunk('single')})}
}

【解决】打包后去除 report.html 文件

主要看 module.exports 对象中 chainWebpack 中 BundleAnalyzerPlugin 相关代码

在这里插入图片描述

vue.config.js 代码

'use strict'
const path = require('path')
const defaultSettings = require('./src/config/index.js')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 【主要代码】const resolve = dir => path.join(__dirname, dir)
// page title
// const name = defaultSettings.title || 'vue mobile template'
const name = defaultSettings.title || ''
// 生产环境，测试和正式
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const loginTarget = 'http://192.168.0.xx:9181' // 公司 移动端 环境
const serviceTarget = 'http://192.168.0.xx:9000' // 公司环境 业务接口module.exports = {// parallel: false,publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用//  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用outputDir: 'dist-ding', //  生产环境构建文件的目录assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录lintOnSave: !IS_PROD,productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。devServer: {port: 9020, // 端口open: false, // 启动后打开浏览器overlay: {//  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层warnings: false,errors: true},proxy: {// 配置跨域'/personnel_manager': {target: loginTarget,changOrigin: true},'/supervise_basic': {target: loginTarget,changOrigin: true},'/subsys_proxy': {target: serviceTarget,changOrigin: true// pathRewrite: {//   '^/subsys_proxy': '/'// }},'/supervise_zfjg': {target: serviceTarget + '/api/',changOrigin: true},'/sys_service_proxy': {target: serviceTarget,changOrigin: true},'/blood_manager': {target: loginTarget,changOrigin: true},'/oss': {// target: 'http://192.168.0.131:8077'target: 'http://192.168.0.xx:9000'}}},css: {extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。sourceMap: false,loaderOptions: {scss: {// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loadersprependData: `@import "assets/css/mixin.scss";@import "assets/css/variables.scss";$cdn: "${defaultSettings.$cdn}";`}}},configureWebpack: config => {config.name = name// 为生产环境修改配置...// if (IS_PROD) {//   // externals//   config.externals = externals// }},chainWebpack: config => {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// 别名 aliasconfig.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('api', resolve('src/api')).set('views', resolve('src/views')).set('components', resolve('src/components'))/*** 添加CDN参数到htmlWebpackPlugin配置中*/// config.plugin('html').tap(args => {//   if (IS_PROD) {//     args[0].cdn = cdn.build//   } else {//     args[0].cdn = cdn.dev//   }//   return args//  })/*** 设置保留空格*/config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {options.compilerOptions.preserveWhitespace = truereturn options}).end()/*** 打包分析*/if (IS_PROD) {// 【主要代码】config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{// analyzerMode: 'static',analyzerMode: 'disabled', // 可以是 server、static、json、disabled。在server模式下，分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下，会生成带有报告的单个HTML文件。在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。openAnalyzer: false // 在默认浏览器中是否自动打开报告，默认 true}])}config// https://webpack.js.org/configuration/devtool/#development.when(!IS_PROD, config => config.devtool('cheap-source-map'))config.when(IS_PROD, config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// 将 runtime 作为内联引入不单独存在inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块commons: {name: 'chunk-commons',test: resolve('src/components'),minChunks: 3, //  被至少用三次以上打包分离priority: 5, // 优先级reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。},node_vendors: {name: 'chunk-libs',chunks: 'initial', // 只打包初始时依赖的第三方test: /[\\/]node_modules[\\/]/,priority: 10},vantUI: {name: 'chunk-vantUI', // 单独将 vantUI 拆包priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的test: /[\\/]node_modules[\\/]_?vant(.*)/}}})config.optimization.runtimeChunk('single')})}
}

参考

webpack-bundle-analyzer 官方 npm
其他csdn分析

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/647542.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

蓝牙----蓝牙协议栈L2CAP

蓝牙----蓝牙协议栈L2CAP

蓝牙协议栈----L2CAP L2CAP的功能术语介绍L2CAP信道L2CAP的工作模式经典蓝牙的分段和分解过程 L2CAP—逻辑链路控制和适配层协议 L2CAP的功能 经典蓝牙的L2CAP层实现了协议复用、数据分段与重组、封装调度等操作。BLE的L2CAP层是经典蓝牙L2CAP层的简化版本&#xff1a; 在基…
阅读更多...
鸿蒙自定义组件内自定义构建函数

鸿蒙自定义组件内自定义构建函数

参数传递规则 自定义构建函数的参数传递有按值传递和按引用传递两种&#xff0c;均需遵守以下规则&#xff1a; 参数的类型必须与参数声明的类型一致&#xff0c;不允许undefined、null和返回undefined、null的表达式。在自定义构建函数内部&#xff0c;不允许改变参数值。如…
阅读更多...
8-Docker网络命令之connect

8-Docker网络命令之connect

1.connect介绍 Docker网络命令connect是用来将容器连接到网络。 2.connect用法 docker network connect [参数] NETWORK CONTAINER [root@centos79 ~]# docker network connect --helpUsage: docker network connect [OPTIONS] NETWORK CONTAINERConnect a container to a…
阅读更多...
爬虫js逆向分析——x平台（实现）

爬虫js逆向分析——x平台（实现）

爬虫js逆向分析——x平台&#xff08;实现&#xff09; &#xff08;仅供学习&#xff0c;本案例只是分析流程没有账号&#xff09;网址&#xff1a;https://xuexi.chinabett.com/ 1.分析请求包格式 打开控制台&#xff0c;并勾选保存日志&#xff0c;然后点击登录看发送了什…
阅读更多...
ICSpector：一款功能强大的微软开源工业PLC安全取证框架

ICSpector：一款功能强大的微软开源工业PLC安全取证框架

关于ICSpector ICSpector是一款功能强大的开源工业PLC安全取证框架&#xff0c;该工具由微软的研究人员负责开发和维护&#xff0c;可以帮助广大研究人员轻松分析工业PLC元数据和项目文件。 ICSpector提供了方便的方式来扫描PLC并识别ICS环境中的可疑痕迹&#xff0c;可以用于…
阅读更多...
如何保证消息队列不丢失消息（以kafka为例）

如何保证消息队列不丢失消息（以kafka为例）

目录 一、引言 二. 持久化存储 2.1持久化存储原理&#xff1a; 2.2使用示例&#xff1a; 1. 安装 Kafka&#xff1a; 2. 生产者代码&#xff1a; 3. 消费者代码&#xff1a; 三. 消息确认机制 3.1消息确认机制原理&#xff1a; 3.2使用示例&#xff1a; 1. 生产者代码…
阅读更多...
Unity配置表xlsx/xls打包后读取错误问题

Unity配置表xlsx/xls打包后读取错误问题

前言 代码如下&#xff1a; //文本解析private void ParseText(){//打开文本 读FileStream stream File.Open(Application.streamingAssetsPath excelname, FileMode.Open, FileAccess.Read, FileShare.Read);//读取文件流IExcelDataReader excelRead ExcelReaderFactory…
阅读更多...
Win32 MDI 程序学习1

Win32 MDI 程序学习1

这个是从 Windows程序设计第五版 改来的；我还没完全理解；先初步看一下； #include <windows.h> #include "resource.h"#define INIT_MENU_POS 0 #define HELLO_MENU_POS 2#define IDM_FIRSTCHILD 50000LRESULT CALLBACK FrameWndProc(HWND, UINT, WP…
阅读更多...
vue实现甘特图

vue实现甘特图

目录 实现效果 一、安装依赖 二、使用 二、绕过license 实现效果 一、安装依赖 npm i --save vue-gantt-schedule-timeline-calendar 实现甘特图需先安装上述依赖&#xff0c;安装依赖实际上是通过gantt-schedule-timeline-calendar来实现的。所以node_module中因包含以下…
阅读更多...
JQuery下载和一些语法

JQuery下载和一些语法

最近学了六种jQuery选择器&#xff0c;我想把学过案例和知识结合起来&#xff0c;给大家分享下&#xff01; 那么既然学jQuery选择器&#xff0c;肯定要先了解下jQuery是什么吧&#xff01;jQuery是一个快速、简洁的JavaScript框架&#xff0c;相当于用jQuery能更加高效的创建…
阅读更多...
【快影】怎么制作卡拉OK字幕

【快影】怎么制作卡拉OK字幕

您好&#xff0c;您添加了字幕之后可以添加动画&#xff0c;选择卡拉OK&#xff0c;其中 卡拉OK1是支持修改颜色的&#xff0c;卡拉OK2只支持修改文字的底色。
阅读更多...
Denoising diffusion implicit models 阅读笔记2

Denoising diffusion implicit models 阅读笔记2

Denoising diffusion probabilistic models (DDPMs)从马尔科夫链中采样生成样本&#xff0c;需要迭代多次&#xff0c;速度较慢。Denoising diffusion implicit models (DDIMs)的提出是为了在复用DDPM训练的网络的前提下&#xff0c;加速采样过程。 加速采样的基本思路是&#…
阅读更多...
MyBatis 的一对多查询可以通过在 ＜resultMap＞ 标签中使用 ＜collection＞ 标签，将查询结果映射成 Java 对象的嵌套集合。

MyBatis 的一对多查询可以通过在 ＜resultMap＞ 标签中使用 ＜collection＞ 标签，将查询结果映射成 Java 对象的嵌套集合。

MyBatis 的一对多查询可以通过在 <resultMap> 标签中使用 <collection> 标签&#xff0c;将查询结果映射成 Java 对象的嵌套集合。具体步骤如下&#xff1a; 在 <resultMap> 中使用 <collection> 标签 在 <resultMap> 标签中使用 <collecti…
阅读更多...
geemap学习笔记052：影像多项式增强

geemap学习笔记052：影像多项式增强

前言 下面介绍的主要内容是应用Image.polynomial() 对图像进行多项式增强。 1 导入库并显示地图 import ee import geemap ee.Initialize() Map geemap.Map(center[40, -100], zoom4)2 多项式增强 # 使用函数 -0.2 2.4x - 1.2x^2 对 MODIS 影像进行非线性对比度增强。# L…
阅读更多...
创建第一个 Spring 项目(IDEA社区版)

创建第一个 Spring 项目(IDEA社区版)

文章目录 创建 Spring 项目创建一个普通的 Maven 项目添加 Spring 依赖IDEA更换国内源 运行第一个 Spring 项目新建启动类存储 Bean 对象将Bean注册到Spring 获取并使用 Bean 对象 创建 Spring 项目 创建一个普通的 Maven 项目 首先创建一个普通的 Maven 项目 添加 Spring 依…
阅读更多...
微信小程序打卡定位实现方案

微信小程序打卡定位实现方案

1背景 业务场景是考勤打卡，在考勤打卡这个业务场景中有两个关键技术点：定位和人员识别。用户界面初步确定是用微信小程序来实现，本文就定位问题做了技术上的调研。 2调研内容 平台注意事项 获取位置 选择位置 查看位置 距离计算 定位精度 防作弊 Demo 3调研结果 3.1平台注…
阅读更多...
全面解析开源大语言模型：BLOOM

全面解析开源大语言模型：BLOOM

大型语言模型 &#xff08;LLM&#xff09; 的兴起一直是自然语言处理 &#xff08;NLP&#xff09; 领域的一个决定性趋势&#xff0c;导致它们在各种应用程序中的广泛采用。然而&#xff0c;这种进步往往是排他性的&#xff0c;大多数由资源丰富的组织开发的 LLM 仍然无法向公…
阅读更多...
什么是servlet

什么是servlet

什么是servlet 什么是servlet Servlet&#xff08;Server Applet&#xff09;是 Java Servlet 的简称&#xff0c;称为小服务程序或服务连接器&#xff0c;用 Java 编写的服务器端程序&#xff0c;具有独立于平台和协议的特性&#xff0c;主要功能在于交互式地浏览和生成数据…
阅读更多...
java数据结构与算法刷题-----LeetCode769. 最多能完成排序的块

java数据结构与算法刷题-----LeetCode769. 最多能完成排序的块

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路 这道题可以理解为&#xff0c;只能保证块内有序的情况下&#xf…
阅读更多...
大模型学习笔记一：大模型应用开发基础

大模型学习笔记一：大模型应用开发基础

文章目录 一、大模型一些概念介绍 一、大模型一些概念介绍 1&#xff09;产品和大模型的区别&#xff08;产品通过调用大模型来具备的能力&#xff09; 2&#xff09;AGI定义 概念&#xff1a;一切问题可以用AI解决 3&#xff09;大模型通俗原理 根据上文&#xff0c;猜测下…
阅读更多...
最新文章

Copyright @ 2022~2023