Vue多入口应用打包时CSS字体URL路径错误问题排查解决

使用Vue开发多入口应用时，项目原始目录结构如下：

|- assets
|  |- fonts
|  |  |- a.ttf  
|  |- styles
|  |  |- b.css     // 内部引入 ../fonts/a.ttf
|- src
|  |- page_one
|  |  |- App.vue   // 内部引入 ../../assets/styles/b.css

项目本地开发环境运行完全正常，部署到服务器后.ttf字体资源返回404错误。检查构建产物发现CSS中引用的字体URL路径解析错误：实际解析路径为http://<host>/css/fonts/a.ttf，预期正确路径应为http://<host>/fonts/a.ttf。

经过多轮定位，确认问题和页面入口配置直接相关。由于项目页面数量较多，需求是将不同页面输出到独立文件夹存放，最初的入口配置如下：

// vue.config.js
module.exports = {
  pages: {
    'a/one': {
      filename: 'a/one.html',
    },
  },
};

执行构建后，产物目录结构如下：

|- dist
|  |- css
|  |  |- a
|  |  |  |- one-<hash>.css // 内部引用 ../fonts/a.ttf
|  |- fonts
|  |  |- a.ttf

打包工具webpack将CSS文件输出到子路径a/one-<hash>.css下，但CSS文件内的URL路径计算逻辑存在偏差：webpack默认判定CSS文件直接存放在css根目录，最终导致相对路径解析结果错误。

入口名称配置中禁止使用斜杠/，正确配置示例如下：

// vue.config.js
module.exports = {
  pages: {
    'a-one': { // 入口名不要使用斜杠
      filename: 'a/one.html', // 该字段依然可以使用斜杠，控制构建后页面输出到独立文件夹
    },
  },
};

以上排查思路和解决方案，同样适用于其他基于webpack构建的项目遇到的同类静态资源路径解析问题。

内容的提问来源于stack exchange，提问作者Orange