发布到 Github 页面时，Vue 应用程序中的资源未加载

Question

我正在将我用 Vue 和 Buefy 制作的 SPA 发布到我的gh-pages私人仓库的 a 分支，这样我就可以测试一切是否都能正常加载。

稍后，我会将完成的网站上传到实际的公共存储库，该存储库与我的自定义 URL 绑定（我正在使用 diff 技术从头开始重新设计该网站）。

由于需要构建 Vue 网站以进行分发，因此我使用 NPM 包来为我执行此操作： https: //github.com/KieferSivitz/vue-gh-pages

"deploy": "node ./node_modules/vue-gh-pages/index.js --branch gh-pages -m \"Deploy to gh-pages.\""

部署网站时，它仅部分加载。图像将无法加载，并且路由器将无法工作（到其他页面的链接将无法工作）。

我将图像存储在assets文件夹中，并用于require('@/assets/logo.png')加载它们（至少它适用于本地主机）。

正在尝试从 加载图像https://<username>.github.io/img/logo.d2151712.png。

我读到我需要将 设为publicPath我的项目名称，因为目前该网站是由 提供服务的https://<userName>.github.io/<projectName>/，但这样一来，整个网站就变成了 404-ing。

有了这个属性，整个网站将尝试从https://<username>.github.io/<projectName>/<projectName>.

我认为在某个地方，有一个设置添加<projectName>到路由器，但没有添加到其他地方。

编辑

我试图强制vue-router获得正确的基础，而不设置publicPath：

base: "<projectName>/", //process.env.BASE_URL,

但路线仍然无法正常工作，因为我懒惰地使用import("@/views/Page.vue").

Answer 1

您的问题似乎是，您想在域的子文件夹（domain.com/subfolder/index.html）中运行 Vue 应用程序。这需要在 Vue CLI 中配置。将一个新文件添加到存储库的根目录，名为vue.config.js并添加以下内容：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
};

当在生产模式下运行构建过程时，这会将 webpack 设置publicPath为。/subfolder/如果您使用的是 Vue CLI < 3.3，则需要改用baseUrl。您需要确保您的路径以斜线开头。

另请参阅的文档publicPath。

Vue CLI 还有一个专门的部分用于部署到 GitHub 页面。您可能还想看看：https://cli.vuejs.org/guide/deployment.html#github-pages