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)
    }
  }

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

相关推荐
云浪9 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨16 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗18 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码20 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜22 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军27 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆36 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆44 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo1 小时前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
coding随想1 小时前
深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”
javascript