目录

构建后静态资源加前缀问题

目录

考虑这样的场景:

构建后的目录需要放在客户机器服务的指定目录下。例如之前的请求是 /assets/a.png 可以访问, 现在需要改成 /a/b/assets/a.png 才能访问,这时候应该如何处理?

解答:

1、如果项目是用 webpack 构建,可以使用 publicPath 解决这问题(未实验验证):

1
2
3
4
5
6
module.exports = {
  //...
  output: {
    publicPath: "/a/b/",
  },
};

参考文档: outputpublicpath

2、如果项目是用 esbuild 构建,可以使用 publicPath 解决这问题(未实验验证):

1
2
3
4
5
6
7
require("esbuild").buildSync({
  entryPoints: ["app.js"],
  bundle: true,
  loader: { ".png": "file" },
  publicPath: "/a/b/",
  outdir: "out",
});

3、如果是 Angular 项目,可以使用 base-href 选项:

1
ng build -prod --app app --base-href "/a/b/"

参考文章: outputpublicpath

4、HTML 的 <base> 标签也能解决这个问题:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <base href="/a/b/" />
  </head>
  <body>
    <!--  -->
  </body>
</html>

这里需要注意,<base> 元素必须在其他任何属性是 URL 的元素之前,例如:<link> 的 href 属性。

参考文档: MDN:base