关于 vue 部署到 githubpages 后静态资源和图片路径错误的 404 问题

• 今天做项目的时候，我需要添加一个二维码图片到页面
• 二维码我放在了 public 目录下，而我是在 src/main.ts 下添加的代码
• 原本路径如下

• 在本地 yarn serve 的时候是可以正常访问的

• 但是在部署后却不行,是 404 错误，路径不对

解决方法

• 路径改写成

src = require('路径/xxx.png')；

• 重新部署

sh deploy.sh

• 问题解决

扩展总结

为避免部署后静态资源路径不对导致的 404和图片路径不对导致的 404问题，应该执行以下操作。

部署后静态资源路径不对的问题（比如 githubpages）

• 因为我们的 js 打包，在 html 里的路径是 /assets 开头的，而 githubpages 是有二级路径的，以/assets开头实际上是加载了https://poyapli.github.io/assets/xxx的资源，路径是错的，所以需要手动修改 webpack 打包的配置，然后重新 build 即可

//  项目根路径/config/index.js
build:{
    assetsPublicPath: '/',   //   改成 './'
}

图片路径不对的问题（比如某个界面的背景图）

• 只需要进行以下操作即可

// 项目根路径/build/utils.js
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',  // 添加这一行代码即可
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

只要执行了以上两个操作，一般问题就解决了。