webpack 打包后,图片加载错误

使用webpack打包后,图片没有加载出来,页面空白,报错图片引用的路径不对

解决办法:

1.找到config->index.js

将 assetsPublicPath: '/', 改为 assetsPublicPath: './'

javascript 复制代码
build: {
    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',       // 改为 assetsPublicPath: './'
    ......
}

2.build->utils.js

找到下面这个函数的代码。

在if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath:'../../'

})

}

代码里添加 publicPath:'../../'

javascript 复制代码
 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {     
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'     // 添加 publicPath:'../../' 
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

有的问题使用第一种办法就可以解决,我有些图片放在全局,全局的图片没有打包出来,添加了第二种解决办法,图片解决了。

相关推荐
excel42 分钟前
应用程序协议注册的原理与示例
前端·后端
我是天龙_绍3 小时前
浏览器指纹,一个挺实用的知识点
前端
theshy3 小时前
前端自制接口抓取工具:一键收集并导出接口列表
前端
wayne2143 小时前
跨平台开发框架全景分析:Flutter、RN、KMM 与腾讯 Kuikly 谁更值得选择?
前端
LuckySusu3 小时前
【js篇】JavaScript 对象创建的 6 种方式:从基础到高级
前端·javascript
LuckySusu3 小时前
【js篇】async/await 的五大核心优势:让异步代码像同步一样清晰
前端·javascript
艾雅法拉拉3 小时前
JS知识点回顾(1)
前端·javascript·面试
LuckySusu3 小时前
【js篇】Promise 解决了什么问题?—— 彻底告别“回调地狱”
前端·javascript
程序员海军3 小时前
如何让AI真正理解你的需求
前端·后端·aigc
passer9813 小时前
基于Vue的场景解决
前端·vue.js