基于Rollup的HTML资源打包与路径替换优化指南-html教程-PHP中文网

rollup打包html时路径解析错乱需统一收口路径控制：强制配置html()插件的publicpath（如'/my-app/'），模板中删除硬编码script/link标签，改用占位符+replace()处理图片等内联路径，多页应用须用[name]区分chunk文件名，禁用标签避免前缀叠加。

基于rollup的html资源打包与路径替换优化指南

Rollup打包HTML时路径解析错乱怎么办

Rollup本身不处理HTML，必须靠插件（如@rollup/plugin-html）注入资源路径。常见现象是生成的index.html里引用的JS/CSS路径为相对路径（如./assets/main.js），但部署到子目录时404——因为插件默认按开发时的output.dir结构生成路径，不感知实际部署位置。

根本原因是template中写的<script src="main.js"></script>被插件原样保留，而自动注入的bundle路径由插件内部逻辑决定，不受publicPath控制。

强制指定publicPath：在html()插件配置中加publicPath: '/my-app/'（结尾带斜杠），它会 prepend 到所有注入的资源路径前
模板里别写死路径：把<script></script>标签删掉，只留<div id="app"></div>，让插件全权注入script/link
确认template路径正确：必须是相对于项目根目录（不是rollup.config.js所在目录），否则插件读不到文件直接报错Error: Template file not found

@rollup/plugin-html如何替换HTML内联资源路径

插件默认只处理<script></script>和<link>标签的src/href，对HTML里写死的图片路径（如<img src="logo.png">）或CSS背景图路径完全不管——这是最容易被忽略的坑。

要统一替换这类路径，得组合使用@rollup/plugin-replace，但它不能识别HTML语法，所以必须用正则精准匹配：

先确保图片等静态资源已复制到输出目录（用@rollup/plugin-copy或手动cp -r src/assets dist/assets）
在replace()插件里写：replace({ 'src="logo.png"': 'src="/assets/logo.png"', preventAssignment: true })
更安全的做法是用占位符：<img src="__ASSET_LOGO__">，然后replace({ '__ASSET_LOGO__': '/assets/logo.png' })
注意preventAssignment: true防止误替换JS里的字符串字面量

多页应用中HTML入口与chunk名冲突怎么解

当配置多个HTML入口（如input: { home: './src/home.pug', about: './src/about.pug' }）时，Rollup默认生成的chunk文件名可能重复（比如都叫index-xxx.js），导致HTML里注入的script标签指向错误文件。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

关键在output.chunkFileNames和output.entryFileNames的命名模板：

必须用[name]区分入口：entryFileNames: '[name]/[name].[hash].js' → 生成home/home.abc123.js
避免用[hash]单独作文件名，否则每次构建hash变，CDN缓存失效；建议[name].[hash].js保留语义
如果用了@rollup/plugin-html，它的fileName选项（如fileName: 'home.html'）只控制输出HTML名，不影响JS路径
检查最终HTML源码，确认<script src="home/home.abc123.js"></script>路径是否与dist目录结构一致

生产环境HTML中base标签和资源路径怎么协同

<base href="/subpath/">看似能一劳永逸解决路径问题，但和Rollup插件注入逻辑容易打架——插件生成的<script src="main.js"></script>会被<base>自动补前缀，而你又在publicPath里写了前缀，结果变成/subpath//subpath/main.js。

真实项目里更推荐彻底放弃<base>，改用纯前缀方案：