Vue CLI 使用相对路径部署到子文件夹

如何解决Vue CLI 使用相对路径部署到子文件夹

使用 Vue CLI 和 Vue 2。

有谁知道如何使用相对路径构建项目，所以我可以将它放在我服务器的任何子文件夹中，它会起作用吗？ （例如www.mysite.com/subfolder/）

我试过了

// vue.config.js
module.exports = {
  publicPath: "",};

它构建相对路径（即，js/app.js 而不是 /js/app.js），但应用程序不会加载。页面上没有显示任何内容。

最奇怪的是，所有文件都正确加载（我可以在 Chrome devtools 中的网络选项卡上检查），没有 JS 错误等。所以页面正在加载所有文件，但似乎在使用时拒绝挂载应用程序相对路径。

我知道我可以在构建过程中添加绝对路径，但这不是我需要的。我的客户需要能够将文件从一个子文件夹自由移动到另一个子文件夹，并且该应用程序应该可以运行而无需重新编译

PS：也试过用 Vite 和 Vue 3 构建项目，同样的问题。

谢谢！

解决方法

好吧，看起来只需要：

1. 使用相对 publicPath（空字符串）构建

// vue.config.js
module.exports = {
  publicPath: "",};

2. 在最终的 HTML 中添加一个 <base> 标签...

<base href="/subfolder/" />

对于Vite，导出应该是

// vite.config.js
export default {
  ...
  base: "",};