多页面应用,vue cli 配置不生成 html 文件

目录

  • 已解决
  • 1,需求
  • 2,解决方案
    • 1,保持现状
    • 2,不生成 html 文件
    • 3,将生成的 html 文件放到其他目录。
  • 3,实现
    • 1,项目结构
    • 2,`vue.config.js` 核心配置
    • 3,打包结果
    • 4,`vue.config.js` 完整配置
  • 其他

已解决

使用的 vue-cli v5.0.8 版本。

原本生成的 html 文件为 index.htmlcallback.htmlerror.html,所以删除处理 html 的 plugin 即可。

chainWebpack: (config) => {config.plugins.delete('html-index')config.plugins.delete('html-callback')config.plugins.delete('html-error')
}

可以打印看看 config.plugins 就知道使用了那些 plugin 了。

例如下面这个,public 目录的内容就不会复制到 dist 目录了。

config.plugins.delete('copy')

以上。


下面是之前尝试过的解决方法,留作记录。

1,需求

前端多页面应用。打包后的文件

  • html 文件放到 Nginx
  • 其他文件放到 CDN

打包后的 js 没有使用 hash 来命名,所以每次打包后的 js 名称都一样。

这样的话 html 文件中引入的 js 文件名不变,所以 html 文件内容也不会变。

所以第一次打包后,将 html 放到 Nginx 上,之后的打包就不需要生成 html 文件,只生成 js,css,img。通过 devOps 运行打包命令,并自动压缩 dist 目录,接着上传到 CDN

2,解决方案

经过调研,有 3 种解决方案

1,保持现状

即便打包后的 dist 目录中有 html 文件也是可以的,一起上传到 CDN 上也不会影响功能,只是有了多余文件。

2,不生成 html 文件

3,将生成的 html 文件放到其他目录。

因为设置了 devOps 只会处理指定的目录。

这2种实现的原理相同,都是指定 html 文件的输出路径

  • filename: ''
  • filename: '其他目录'

有一个问题,当 filename: '' 打包时,结果符合预期,但打包命令会执行出错!

因为打包命令运行到处理 html 文件时,会报错退出执行。原因是 filename 目录必须合法:是字符串类型而且不为空。

ERROR  Error: EISDIR: illegal operation on a directory, open 'D:\xxx\dist'
Error: EISDIR: illegal operation on a directory, open 'D:\xxx\dist'
ELIFECYCLE  Command failed with exit code 1.
WARN   Local package.json exists, but node_modules missing, did you mean to install?

3,实现

1,项目结构

-- public-- images
-- src-- api-- components-- pages-- callback-- index.vue-- main.js-- index-- index.vue-- main.js-- error-- index.vue-- main.js
-- package.json
-- vue.config.js

2,vue.config.js 核心配置

多页面 pages 配置参考

const glob = require('glob')
const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}function getEntries(globPath) {const files = glob.sync(globPath), entries = {}/* files ['src/pages/callback/main.js','src/pages/error/main.js','src/pages/index/main.js','src/pages/payconfirm/main.js']获取所有匹配文件的路径,取倒数第二层(pages下面的文件夹)做包名*/files.forEach(function (filepath) {const split = filepath.split('/')const name = split[split.length - 2]/* entries[name] 可以是字符串,表示文件路径。其他参数默认即可。entries[name] = filepath也可以是对象,有更多的配置项,这里只用到 filename:指定打包后的 html 文件名称。*/entries[name] = {entry: filepath,// filename 如果为 '',其他文件会正常打包,但不会输出 html 文件!因为打包命令运行到处理 html 文件时会报错退出执行。filename: resolve('dist2/') + name + '.html'}})return entries
}// 获取所有匹配src下目录的文件夹名字,其中文件夹里main.js为页面入口
const pages = getEntries('src/**/main.js')module.exports = {pages,
}

3,打包结果

-- dist-- images-- js-- callback.js-- chunk-common.js-- chunk-vendors.js-- error.js-- index.js
-- dist2-- callback.html-- error.html-- index.html 

4,vue.config.js 完整配置

const glob = require('glob')
const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}function getEntries(globPath) {const files = glob.sync(globPath), entries = {}files.forEach(function (filepath) {const split = filepath.split('/')const name = split[split.length - 2]entries[name] = {entry: filepath,filename: resolve('dist2/') + name + '.html'}})return entries
}// 获取所有匹配src下目录的文件夹名字,其中文件夹里main.js为页面入口
const pages = getEntries('src/**/main.js')module.exports = {publicPath: process.env.VUE_APP_PUBLIC_PATH, // 本地 '/' 其他 'CDN路径'pages,chainWebpack: (config) => {config.resolve.alias.set('@', resolve('src'))},css: {loaderOptions: {scss: {// 全局 scss 变量additionalData: `@import "@/styles/var.scss";`}}},devServer: {port: 8080,// 解决本地运行时,因为内网导致热更新失败的问题。client: {webSocketURL: 'ws://0.0.0.0:8080/ws'},proxy: {'/cashier_core': {target: 'https://xxx.com.cn/',changeOrigin: true}}}
}

其他

设置更改 js 的打包路径(相对于 outputDir 目录(默认 dist ))。也可以通过指定 assetsdir 来实现。

chainWebpack: (config) => {config.output.set('filename', 'static/js/[name].[chunkhash].js')
},

以上。

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

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

相关文章

Nginx入门——Nginx的docker版本和windows版本安装和使用 代理的概念 负载分配策略

目录 引出nginx是啥正向代理和反向代理正向代理反向代理 nginx的安装使用Docker版本的nginx安装下载创建挂载文件获取配置文件创建docker容器拷贝容器中的配置文件删除容器 创建运行容器开放端口进行代理和测试 Windows版本的使用反向代理多个端口运行日志查看启动关闭重启 负载…

【BASH】回顾与知识点梳理(三十八)

【BASH】回顾与知识点梳理 三十八 三十八. 源码概念及简单编译38.1 开放源码的软件安装与升级简介什么是开放源码、编译程序与可执行文件什么是函式库什么是 make 与 configure什么是 Tarball 的软件如何安装与升级软件 38.2 使用传统程序语言进行编译的简单范例单一程序&#…

leetcode304. 二维区域和检索 - 矩阵不可变(java)

前缀和数组 二维区域和检索 - 矩阵不可变题目描述前缀和代码演示 一维数组前缀和 二维区域和检索 - 矩阵不可变 难度 - 中等 原题链接 - 二维区域和检索 - 矩阵不可变 题目描述 给定一个二维矩阵 matrix,以下类型的多个请求: 计算其子矩形范围内元素的总…

python3对接godaddy API,实现自动更改域名解析(DDNS)

python3对接godaddy API,实现自动更改域名解析(DDNS) 文章开始前,先解释下如下问题: ①什么是域名解析? 域名解析一般是指通过一个域名指向IP地址(A解析),然后我们访问…

SpringBoot-1-Spring Boot实战:快速搭建你的第一个应用,以及了解原理

SpringBoot-1-Spring Boot实战:快速搭建你的第一个应用,以及了解原理 今日内容 SpringBootWeb入门 前言 我们在之前介绍Spring的时候,已经说过Spring官方(Spring官方)提供很多开源项目,点击projects,看到spring家族…

【前端】深入解析CSS:选择器、显示模式、背景属性和特征剖析

目录 一、前言二、CSS的复合选择器1、后代选择器①、语法②、注意事项 2、子选择器①、语法②、注意事项 3、并集选择器①、语法②、注意事项 4、链接伪类选择器①、语法②、注意事项 三、CSS元素显示模式转换1、转换为块元素display:block2、转换为行内元素display:inline3、转…

带您解读DeepBook经济原理

DeepBook是Sui上的第一个原生流动性层,通过Sui可预测且低廉的gas费,将促进DeepBook上的大规模交易活动。鉴于DeepBook的中央限价订单簿(Central Limit Order Book,CLOB)架构,交易量越大,资产价格…

java gradle 项目 在idea上 搭建一个简单的thrift实例

前言 Thrift是RPC通信的一种方式,可以通过跨语言进行通信,最近项目需要进行跨语言的通信,因此首先尝试搭建了一个简单的thrift框架,因为网上的实例大都参差不全,通过gpt查询得到的结果对我帮助更大一点,但…

通信原理 | 窗函数 | 矩形窗 | 汉宁窗 | 汉明窗 | 布莱克曼窗 | 补零对频谱的影响

文章目录 矩形窗矩形窗的时域表达式N=32的时域图N=32的频域图时域补零后的时域序列时域补零后的频域序列时域补零到序列长度为4096,对应的频域序列纵轴取对数汉宁窗N=32的情况下的时域序列N=32的频域图时域补零后的时域序列和对应频域序列时域补零到序列长度为4096,对应的频域…

CentOS KVM虚拟安装和开机启动

1. 配置系统 关闭SELinux setenforce 0持久化关闭配置 vi /etc/selinux/config2. 安装虚拟化软件 安装 KVM、QEMU等虚拟化软件。 yum install qemu-kvm qemu-img virt-manager libvirt virt-install virt-viewer 检查LVM模块是否已经加载 lsmod |grep kvm设置开机启动 s…

回归预测 | MATLAB实现GWO-BP灰狼算法优化BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GWO-BP灰狼算法优化BP神经网络多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现GWO-BP灰狼算法优化BP神经网络多输入单输出回归预测(多指标,多图)效果一览基本介绍程序…

零基础如何使用IDEA启动前后端分离中的前端项目(Vue)?

一、在IDEA中配置vue插件 点击File-->Settings-->Plugins-->搜索vue.js插件进行安装,下面的图中我已经安装好了 二、搭建node.js环境 安装node.js 可以去官网下载:安装过程就很简单,直接下一步就行 测试是否安装成功:要…

JavaScript如何实现数据的深拷贝、浅拷贝?

原文合集地址如下,有需要的朋友可以关注 本文地址 什么是深浅拷贝 说到深浅拷贝就得提起JavaScript中的数据类型之前的文章中有介绍过,这里就不再细说了。 浅拷贝:对基本数据类型进行值复制,对引用数据类型复制引用地址。浅拷贝会创建一个…

队列(Queue):先进先出的数据结构队列

栈与队列https://blog.csdn.net/qq_45467165/article/details/127958960?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127958960%22%2C%22source%22%3A%22qq_45467165%22%7D 队列(Queue)是一种常见的线…

Apache Shiro是什么

特点 Apache Shiro是一个强大且易用的Java安全框架,用于身份验证、授权、会话管理和加密。它的设计目标是简化应用程序的安全性实现,使开发人员能够更轻松地处理各种安全性问题,从而提高应用程序的安全性和可维护性。下面是一些Apache Shiro的关键特点和概念: 特点和概念…

【芯片设计封装与测试】芯片测试目的、方法、分类及案例

目录 1.芯片测试概述(目的、方法) 1.1.测试在芯片产业价值链上的位置 2.测试如何体现在设计的过程中 2.1.半导体测试定义与基本工作机制 2.2.半导体测试环节分类及对应设备 2.3.设计验证 3.测试的各种类型 3.1.抽样测试和生产全测 3.2.测试相关…

controller层如何接收带参数的查询

在控制器(Controller)层接收带参数的查询可以通过多种方式实现。以下是几种常见的方法: 使用 URL 路径参数:将参数作为 URL 的一部分,例如 /users/{userId}。在 Spring MVC 中,您可以使用 PathVariable 注解…

Mysql知识梳理

Mysql知识梳理 索引索引分类索引未命中的原因性能调优命令Explain回表 mysql性能优化事务四大特性事务隔离级别设置事务隔离级别 存储引擎聚簇索引和非聚簇索引聚簇索引非聚簇索引 最左前缀结合原则全文索引 索引 索引分类 mysql有普通索引、空间索引、主键索引、唯一索引、组…

高忆管理:股市交易时间和规则?

股市是指股票买卖商场,出资者买卖股票来获取出资回报。买卖时刻和规矩是股票商场的核心,它约束了股票价格的改变和买卖者的行为。那么,股市的买卖时刻和规矩是什么?咱们应该怎么了解和运用它们来出资? 一、股市买卖时刻…

集成放大器 电路 分析 设计过程中的概念和要点

集成运放的三大特性:虚短、虚断、 和 虚地把这几个特性理解明白了, 后面的电路分析就很容易上手。 虚短:UPUN,两输入端电压相等。虚断:IPIN0,两输入端的输入电流为0。虚地:UPUN0&#xff0c…