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

wanger 2021-06-17 收录于前端

考虑这样的场景：

构建后的目录需要放在客户机器服务的指定目录下。例如之前的请求是 /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