Vue.js 发布到Github页面时未加载Vue应用程序中的资产

我正在将我与Vue和Buefy制作的SPA发布到私人回购的a gh pages分支，这样我就可以测试是否所有东西都能正常加载

稍后，我将把完成的网站上传到实际的公共回购协议，该协议与我的自定义URL绑定。我正在使用一种不同的技术从头开始重新设计网站

由于Vue网站需要为发布而构建，因此我使用NPM软件包来完成这项工作：

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

我将图像存储在assets文件夹中，并使用require'@/assets/logo.png'加载它们，至少它可以与localhost一起工作

正在尝试从中加载图像https://.github.io/img/logo.d2151712.png.

我读到我需要将publicPath设置为我的项目名称，因为目前该网站由https://.github.io//，但有了这些，整个网站都变得异常活跃

使用该属性，整个网站将尝试从https://.github.io//.

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

编辑 我试图强制vue router获得正确的基础，但没有设置公共路径：

---

但是路由仍然不起作用，因为我懒得使用import@/views/Page.vue加载它们。

您的问题似乎是，您想在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。您需要确保路径以斜线开始

另见

Vue CLI还有一个专门的部分用于部署到GitHub页面。您可能还想看看这个：

我读到我需要将publicPath设置为我的项目名称，因为目前该网站由https://.github.io//，但有了这些，整个网站都变得异常活跃

实际上，需要将publicPath属性设置为GitHub repo name，并用斜杠包围，即/GitHub\u repo\u name/。404是由vue gh页面引起的：

-> -> 使用该属性，整个网站将尝试从https://.github.io//.

这是删除斜杠的副作用，使URL相对。相对于附加到当前目录的当前位置。例如，使用此GitHub页面URL-https://tony19-sandbox.github.io/github-pages-vue-demo/，vue demo/js/app.9b45ea45.js的github页面的相对URL将解析为：

https://tony19-sandbox.github.io/github-pages-vue-demo/github-pages-vue-demo/js/app.9b45ea45.js

https://tony19-sandbox.github.io/github-pages-vue-demo/js/app.9b45ea45.js

而vue demo/js/app.9b45ea45.js/github页面的绝对URL将解析为：

https://tony19-sandbox.github.io/github-pages-vue-demo/github-pages-vue-demo/js/app.9b45ea45.js

https://tony19-sandbox.github.io/github-pages-vue-demo/js/app.9b45ea45.js

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

vue路由器具有用于此目的的属性，但vue CLI@vue/CLI插件路由器不正确。该环境变量已等于Vue CLI配置中的publicPath，因此无需进行设置

变通办法 如果您希望继续使用vue gh页面，可以使用，如下所示：

//编辑制作； 如果存储库！==空的{ 推拉式摄影； }

---

否则，我将完全跳过该库，直接在部署脚本中使用。

Vue对此有一个配置。如果使用vue客户端，请将vue.config.js添加到下一行por public path属性中

module.exports={ publicPath:process.env.NODE_env==='production'？'./'：'/'}

---

您尝试将什么作为publicpath的值？我想应该是“/”。是的，我也试过了。这里有更多的信息，这就是问题所在。如果我将publicPath属性设置为我的项目名称，它将尝试从domain.com/projectName/projectName加载页面。在我的帖子中看到我的评论。这是一个插件的问题，该插件将网站发布到gh页面。谢谢。如果可以编辑“/”，那么它可以是泛型module.exports={publicPath:process.env.NODE_env===='production'？'。/'：'/'；成功了！谢谢最后，我使用GitHub操作，通过一个支持脚本发布到gh页面。我的网站在“手动”导航时是404'ing，键入其他页面的地址。然后我看到您添加了一个404页面，其中包含一些绑定到所创建事件的脚本。为什么这是必要的？路由器不是已经知道路由了吗？啊，我现在明白了。它与历史模式有关。有了这个重定向，浏览输入一个不存在的页面将把用户推到主页，而不刷新URL。因此，我在NotFound页面中添加了一个“全包”路径。请参阅我5月17日的答案，以获得相同的解决方案。