基于vue打包后字体和图片资源失效问题的解决方法

这里介绍一下解决“基于vue打包后字体和图片资源失效”这个问题的几种方法。

方法一：使用相对路径

在vue.config.js中，设置publicPath属性为“./”即可。这样打包后的文件中就会使用相对路径来引用资源，就不会出现资源失效的问题了。

  module.exports = {
    publicPath: './',
  };

这是一篇示例：在Vue打包后，图片路径无法正确引用的原因与解决方案

方法二：使用file-loader

使用file-loader可以将文件打包成一个独立的文件，这样可以解决路径问题。

安装file-loader：

npm install --save-dev file-loader

在vue.config.js中添加以下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .test(/\.(eot|svg|ttf|woff|woff2)$/)
      .use('file-loader')
      .loader('file-loader')
      .tap(options => {
        return {
          limit: 4096,
          fallback: {
            filename: `fonts/[name].[hash:8].[ext]`
          }
        }
      })
      .end();

    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif)$/i)
      .use('file-loader')
      .loader('file-loader')
      .tap(options => {
        return {
          limit: 4096,
          fallback: {
            filename: `img/[name].[hash:8].[ext]`
            }
          }
      })
      .end();
  }
}

这是另外一篇示例：解决vue-cli打包后图片、字体等静态资源路径指向错误的问题

以上两个方法都可以解决“基于vue打包后字体和图片资源失效”的问题，根据具体情况选择不同的方案。