webpack打包时，html出现路径问题

最新推荐文章于 2021-12-13 21:35:46 发布
最新推荐文章于 2021-12-13 21:35:46 发布
阅读量846 收藏
点赞数
分类专栏： Vue项目优化 webpack搭建vue vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Genius_cxx/article/details/99314089
版权

1.在webpack打包时，npm run build 访问里面的index首页，发现路径不对，有时候是空白页。
错误error

解决方法：
在config下面的index.js把 assetsPublicPath: ‘/’, 修改为： assetsPublicPath: ‘./’,
在这里插入图片描述
2.ttf .woff .woff2.img路径错误

解决方法：
在build下面的webpack.base.conf.js把 limit 的值调的大些
在这里插入图片描述

众生皆苦唯有我甜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack学习系列 | Webpack 5 集成 HTML 插件高效解决文件路径问题
youyacoder的博客
07-25 327
主要通过实操讲解运用Webpack 5 如何集成 HTML 插件从而高效解决文件路径问题
Webpack打包时css中url路径问题
有理想的咸鱼焦
01-02 2620
Webpack打包时css中url路径问题问题描述项目结构最初的配置文件 webpack.config.js改正后的配置文件 问题描述 在使用webpack中url-loader对css中的图片进行打包时，打包后图片路径不对。 项目结构 最初的配置文件 webpack.config.js { loader: 'url-loader', opti...
webpack配置路径问题
weixin_34126215的博客
02-25 607
node.js path模块（路径整合） path.join() let result = path.join('C:\'www','temp','index.html'); console.log(result); //C:'www\temp\index.html 补充 path.isAbsolute() let result ...
webpack构建前端工程路径问题
月音2010
03-13 392
·使用webpack构建项目时，不要直接使用  / 根路径（构建出的文件若放到别的文件夹下会出现资源请求路径不正确的问题），应该写 ../../ 这种相对路径
webpack--记录--基础二(主要记录webpack打包处理路径问题)
qq_39183005的博客
01-30 282
上一篇文章说了webpack打包时候将css文件是直接打包到js中，但是项目中我们并不想这么做，需要单独抽离出来 1、抽离css文件到单独文件 使用 mini-css-extract-plugin 可以将css抽离到单独目录 npm i mini-css-extract-plugin -D 在配置文件中引入 const MiniCssExtractPlugin = require('mini-css-extract-plugin') 在配置文件中的plugins中使用，filename是将css
webpack的出入口，还有图片路径问题
qlin_11的博客
06-13 1036
这里有一篇博文，里面关于__dirname的概念解释的很好，官方文档都没解释，另外这里提一句，关于图片路径只有在csss文件中能识别，js文件中需要使用var myimg = require（路径）的方式来引用才能识别。 在webpack4.0后，可以不使用配置文件，但其仍是可高度配置的。在根目录下创建webpack.config.js，对其module.exports的属性进行配置即为webpa...
html图片路径报错,如何解决webpack打包后直接访问页面图片路径错误
weixin_36255898的博客
06-05 704
这篇文章主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。前言本文说的这种图片路径错误是这样的，运行webpack-dev-server，一切正常，没有错误。当webpack之后，直接打开index页面，报错，图片找不到，找不到的原因是路径错误。先看我的项目代码webpack.c...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在本案例中，可以在适当的位置添加`../../`作为公共路径前缀，这样在打包`iconfont`字体文件路径时，Webpack会自动加上这个公共路径，确保CSS文件中的路径指向正确。 例如，你可能需要修改`build/utils.js`中的CSS ...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
webpack踩坑之路图片的路径与打包
08-29
在 Webpack 中，图片的路径与打包是一个常见的问题，尤其是在初学者刚开始使用 Webpack 时。图片的引用方式有多种，包括 HTML 文件中的 img 标签、CSS 文件中的背景图设置、JavaScript 文件中的动态添加或改变图片...
webpack学习教程之publicPath路径问题详解
08-30
主要给大家介绍了webpack学习教程之publicPath路径问题的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定webpack输出的位置，其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值： process.cwd() output.path 只是指示输出的目录，对应一个 绝对路径 ，例如在项目中通常会做如下配置： output: { path: path.resolve(__dirna
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__dirname, 'node_modules'), use: ['style-loader', 'css-loader', 'less-loader'] } 打包后在dist目录的发现没有css文件。这是因为css
webpack打包后直接访问页面图片路径错误的解决方法
08-30
主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
浅谈webpack打包过程中因为图片的路径导致的问题
01-21
最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示： 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打包生成的一个文件build.js, 同时还额外的生成了一个图片文件, 这个文件就是刚刚我们在
解决vue-cli webpack打包后加载资源的路径问题
10-17
本文将详细讲解如何解决Vue CLI与Webpack打包后资源路径问题。 首先，当你的Vue项目在打包后出现访问空白的情况，这通常是因为静态资源（如CSS、JS、ICO等）无法正确加载。问题可能出在`dist`目录的结构上。在默认...
27 webpack中资源文件路径问题
sinat_41212418的博客
12-13 1528
资源文件路径问题 Webpack中涉及到很多路径的操作，文件的生成路径，资源的引入路径等等，有时候配置的小差异，就会导致路径不正确的问题。同时在之前的学习中，构建出的项目文件全部是在同一个文件夹dist目录下，较好的实践是同一类型的资源应该是在一个统一的文件夹下面，比如生成的JavaScript文件全部放在同一个文件夹下面，Css文件全部放在同一个文件夹下面。此章节针对于上述两个问题给出具体的解决方案。 生成资源文件夹 假设项目中使用了JavaScript，Css，字体图标和其他媒体资源，我们希望在构建完成
webpack html输出路径,Webpack中publicPath详解
weixin_39939601的博客
06-15 795
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。outputoutput选项指定webpack输出的位置，其中比较重要的也是经常用到的有path和publicPathoutput.path默认值：process.cw...
webpack打包本地访问显示路径错误
weixin_30411997的博客
02-26 1023
webpack打包本地访问显示路径错误，解决方法修改config文件中index.js文件 build:{ 　　assetsPublicPath: './', } 转载于:https://www.cnblogs.com/tw6668/p/10437709.html
webpack配置打包相对路径
最新发布
06-28
Webpack是一个强大的模块打包工具，它可以帮助你管理项目中的各种资源，如JavaScript、CSS、图片等，并将它们打包到一个或多个优化过的文件中。在配置打包相对路径时，你需要确保资源引用能够正确地在打包后的文件结构中解析。 在Webpack配置文件（通常为webpack.config.js）中，你可以使用`output.publicPath`属性来设置静态资源的访问路径。例如： ```javascript module.exports = { // ... output: { // 输出文件的根目录 path: path.resolve(__dirname, 'dist'), // 公共路径，用于动态计算资源的URL publicPath: '/my-assets/', }, // ... }; ``` 在这个例子中，如果你在HTML文件里有一个相对路径的CSS引用，比如`<link rel="stylesheet" href="styles.css">`，在经过Webpack打包后，实际的引用会变成`<link rel="stylesheet" href="/my-assets/styles.css">`。 如果你使用的是ES6的模块导入，Webpack会自动处理相对路径，比如： ```javascript import './styles.css'; // 在打包后会替换为正确的公共路径 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值