首页
前端开发
Webpack
解决Vue和Webpack打包后图片路径错误的方案

解决Vue和Webpack打包后图片路径错误的方案

20 次浏览 0 条评论
pdf
pdf

在使用Vue.js和Webpack时，图片路径错误是常见问题。这通常发生在Webpack打包过程中，静态资源如图片的路径可能会出现问题。解决这个问题需要以下步骤：

  1. 修改config/index.js中的assetsPublicPath设置为'./'，确保资源路径相对于当前页面。例如：
module.exports = {
  //...
  build: {
    assetsPublicPath: './'
  }
};
  1. 更新build/webpack.prod.conf.js文件中的output配置，添加publicPath: './'以使用相对路径。例如：
module.exports = {
  //...
  output: {
    //...
    publicPath: './'
  }
};
  1. 在build/utils.js文件中，修改处理CSS的代码，添加publicPath: '../'以保持CSS中图片路径的正确性。例如：
cssLoaderOptions: {
  importLoaders: 1,
  sourceMap: config.productionSourceMap,
  modules: {
    getLocalIdent: utils.getLocalIdent,
  },
  publicPath: '../'
}

按照以上步骤操作后，图片路径问题应该得到解决，使资源在生产环境中正常加载。

pdf 文件大小：38.03KB