webpack 打包后,图片加载错误

news/2024/7/10 2:39:40 标签: webpack, 前端, node.js, javascript, vue

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

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


http://www.niftyadmin.cn/n/5419712.html

相关文章

BPMN:业务流程建模的利器

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )

必备知识点:js 【详解】函数中的 this 指向_js function this-CSDN博客 https://blog.csdn.net/weixin_41192489/article/details/123093256 bind、call、apply 的相同点 都是Function原型上的方法用途都是改变 this 的指向第一个参数都是新的 this bind、call、app…

错误票据 刷题笔记

开数组 读入数据 记录最小值和最大值 每次读入x; 让a[x]; 从最小值开始 向上扫 当扫到a[x]0时候为断号 扫到a[x]>1为重号&#xff1b; 该题的小技巧 未知长度的数据的读入方式 1.首先在头文件敲上 #include<sstream> #include<string> #include<…

使用摇杆以及oled显示屏 制作 选择菜单以及子菜单

x轴方向控制翻页 y轴方向控制上下选择 #include <Arduino.h> #include <U8g2lib.h>// PS2摇杆和按钮的引脚定义 const int ps2_y_pin 33; // Y轴用于上下选择 const int ps2_x_pin 32; // X轴用于翻页&#xff08;进入/退出子菜单&#xff09;// OLED显示屏初始…

Qt设置右键菜单无效customContextMenuRequested(const QPoint pos)

问题代码&#xff1a; void MainWindow::onCustomContextMenuRequested(const QPoint &pos) {QTreeWidgetItem *item ui->treeWidget->itemAt(pos);if (item){QMenu menu(ui->treeWidget);TreeNodeType nodeType (TreeNodeType)item->data(0, Qt::UserRole …

一周速递|全球车联网产业动态(2024年3月10日)

政策法规 1、3月5日&#xff0c;国务院国有资产监督管理委员会党委书记、主任张玉卓受邀在十四届全国人大二次会议首场“部长通道”集中采访活动中表示&#xff0c;国有汽车企业在新能源汽车方面发展还不够快&#xff0c;将对三家中央汽车企业&#xff0c;进行新能源汽车业务的…

线程-创建线程的方法、线程池

1.创建线程一共有哪几种方法&#xff1f; 继承Thread类创建线程 继承Thread类&#xff0c;重写run()方法&#xff0c;在main()函数中调用子类的strat()方法 实现Runnable接口创建线程 先创建实现Runnable接口的类&#xff0c;重写run()方法&#xff0c;创建类的实例对象&#…

关于VS-QT中创建ui文件没有同时创建h和cpp文件的解决方法

以下只提供一种解决方案&#xff0c;只针对我遇到的一种情况&#xff0c;并非对所有人有效。 1.新建一个QWidget Application,项目名称建议取名为所需要的ui类的名字&#xff0c;不过不是也没关系 2.按照提示下一步&#xff0c;基类选择QWidget还是QMainWindow看自己的需要&am…