如何在将vue应用程序部署到gh-pages时修复背景图像的路径？

Question

我将我的vue-app部署到gh-pages并面临加载背景图片的问题。

这是我项目的结构

并here在gh-pages live上链接到我的项目 您可以看到img标签中的图像正在加载，并且svg文件正在加载，但是不是svg的背景图像不是（我的所有背景图像都在img文件夹中）。

我可以在控制台中看到哪些路径搞砸了 - 它们应该是static/img/footer.88ceaa2.png，而是static/css/static/img/footer.88ceaa2.png

我的组件中的背景路径应该是不同的，还是我的配置文件中的东西？任何帮助将不胜感激。

Link to repo

Answer 1

我对Nuxt有同样的问题，有一种方法可以通过绑定样式作为内联

来解决

:style="{ backgroundImage: 'url(' + require('@/assets/imgs/assets/img/header.png') + ')' }"

Answer 2

只需使用新版vue-cli。

安装：

$ npm install -g @vue/cli
--or--
$ yarn global add @vue/cli

创建一个新项目：

$ vue create my-project

cd进入my-project并删除src文件夹。 从项目中复制src文件夹（shelder） 并将其粘贴到my-project文件夹中。

运行项目：

$ npm run serve
--or--
$ yarn serve

<强>构建：

$ npm run build
--or--
$ yarn build