时间戳

首页 > 解决方案 > Vue CLI 使用相对路径部署到子文件夹

vue.js - 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 构建项目，同样的问题。

谢谢！

标签： vue.jsdeploymentvue-cli-4vite

解决方案

好吧，看起来只需要：

  1. 使用相对 publicPath 构建（空字符串）
// vue.config.js
module.exports = {
  publicPath: "",
};
  1. <base>在最终的 HTML 中添加标签...
<base href="/subfolder/" />

对于Vite，出口应该是

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

推荐阅读