Vue项目build后,图片加载不出来的解决

来源：脚本之家时间：2022-03-26 16:05:35

Vue项目build图片加载不出来

vue项目，build之后会对图片进行处理，具体处理的方式是在文件webpack.base.conf.js中，有如下代码：

module: {
    rules: [
     {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000, // 1k-----限制文件的大小
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
     }
    ]
}

以上代码中，使用url-loader对图片的大小进行限制，在limit之内，webpack会将图片转化为base64，超出limit限制，交给file-loader处理。

如果在limit范围之内，不会出现图片加载不出来的情况；

超出limit，webpack会将处理后的图片放在dist/static/img/中，此时加载图片将会显示不出来。具体做法如下：

1.在config/index.js文件内

修改代码： (列出index.js的部分代码)

build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),
 
    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "./", 
}

assetsPublicPath字段值由之前的"/"改为"./"；

2.在webpack.prod.conf.js文件内

output字段，添加代码(publicPath: "./")：

output: {
    publicPath: "./", // 添加的代码
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),
    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
  },

3.在utils.js文件里添加 publicPath:"../../"

代码如下：

// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: "vue-style-loader",
    publicPath: "../../"  // 添加的代码
  })
} else {
  return ["vue-style-loader"].concat(loaders)
}

以上步骤操作完后，执行命令:npm run build

在build后，dist中的index.html页面的link、script标签的引入路径变为相对路径；同时，相关的图片路径，也变变为相对路径，此时部署项目，不再出现图片路径404。