问题简述
在开发项目的过程中，遇到了模板文件下载的功能。项目采用了前端项目存储模板文件的方案，将资源文件存储在 asset 目录下。
本地调试时，模板文件可以正常下载；但在发布到测试环境后，下载时会提示文件损坏。
调试
在本地打包后，构建产物中可以看到 Excel 文件存在于最外层目录，并且在项目中打印的模板文件路径也是正确的。
原因
项目进行了多版本部署的改造，所有静态资源存放在 static 目录下。由于二级域名会映射到 static 目录，因此无法获取 static 外面的静态资源文件。
解决方案
需要修改 webpack 打包生成静态资源路径的配置。
在 webpack 中文文档 中有关于这个配置项的详细介绍。同时，文档中还有一个 publicPath 的配置项，那 filename 和 publicPath 之间有什么区别呢？
filename 和 publicPath 区别
在 webpack 配置中，rules 的 generator 属性用于控制文件资源模块的生成方式，其中 filename 和 publicPath 是两个常用的配置项，常用于处理静态文件的路径和生成的文件名。
1. filename
-
作用：
filename决定生成文件的名称格式（包括文件路径）。用于指定输出文件的命名规则，常用于根据文件内容哈希生成文件名以实现缓存管理。 -
示例：可使用占位符（如
[name]、[hash]、[ext]等）来动态生成文件名。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset',
generator: {
filename: 'images/[name].[hash][ext]'
}
}
]
}
};
在这个示例中，符合规则的图片文件将被输出到 images 文件夹中，且文件名会带有哈希值，以避免缓存问题。
2. publicPath
-
作用：
publicPath用于指定在浏览器中访问资源时的公共 URL 路径（例如资源的 CDN 或服务器路径）。它决定了在 HTML 文件中引用生成的文件时使用的路径。 -
说明：通常用于告诉 webpack 在打包后，如何在 HTML 文件或其他静态资源中引用生成的文件。默认情况下，它是相对于服务器根目录的，但可以通过
publicPath指定完整的 URL 或 CDN 路径。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset',
generator: {
publicPath: '/assets/images/', // 浏览器中访问资源的路径
filename: 'images/[name].[hash][ext]'
}
}
]
}
};
在这个示例中，生成的图片文件名格式保持不变，但在 HTML 文件中引用这些图片时，路径将会是 /assets/images/。
区别总结
-
filename：控制生成的物理文件名和文件存放路径。 -
publicPath：控制文件在浏览器端的引用路径，指定文件在 Web 上的访问路径。
通常，开发环境和生产环境的 publicPath 会配置不同的路径，例如生产环境使用 CDN，而 filename 则决定文件如何存储在文件系统中。
结尾
成功修改构建产物的路径后，模板文件可以成功下载。
评论区