VUE项目 打包时关于svg报错问题解决办法

最新推荐文章于 2025-07-14 15:13:23 发布
原创 最新推荐文章于 2025-07-14 15:13:23 发布 · 6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#打包 #svg错误

本文记录了解决Vue项目打包时出现的关于SVG引用必须使用双引号的问题，通过修改MUI图标引用的单引号为双引号，成功解决了打包错误。

今天打包vue项目的时候疯狂报错，报错信息如下：

building for production...Error processing file: static/css/app.316977a049dccd7ae4089d9226e81a34.css
(node:11888) UnhandledPromiseRejectionWarning: postcss-svgo: Error in parsing SVG: Unquoted attribute value
Line: 0
Column: 14
Char: \
(node:11888) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:11888) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这里提示打包出来的静态资源中的css文件中的svg引用必须使用双引号。
具体是指的什么呢？
在项目中，我引用了mui的icon。
目录结构
然后打开mui.css,查找svg，发现了2处引用，将单引号修改成双引号，如下
修改成双引号
然后再同样在mui.min.css修改一下。
在重新打包就成功了！

Vue - 解决启动报错 Failed to compile with 1 errors 但是error没有错误信息，vue运行时报错但是没有错误提示日志信息（有报错但是没有错误提示，详细排查解决）
🏆 前端领域优质创作者
07-17 4244
vue 启动报错，但是没有错误信息 Failed to compile with 1 errors，完全看不到错误信息，vue3，vue2，仅仅提示却没有详细的报错日志怎么办，如何排查这个问题，项目突然就报错了，vue webpack 有报错但是没有错误提示，原来一直没问题也没改代码就启动失败了，昨天还运行好好的项目突然就报错了，npm run build启动报错，npm run server启动报错，什么错误都没有，node启动报错，没有错误信息怎么解决，解决vue安装less报错，Vue创建Vue单文件
Vue2/3 - 解决报错：This may cause things to work incorrectly. Make sure to use the same version for both.
高级前端工程师
12-26 5054
vue，vue安装依赖报错，vue运行时报错，run server，run dev时报错，vue如何解决This may cause things to work incorrectly. Make sure to use the same version for both.If you are using vue-loader@>=XXX, simply update vue-template-compiler.If you are using vue-loadergkXX or vueify, re-i
vue打包报错building for production...Error processing file:
weixin_43073383的博客
02-15 3591
打包一直卡在这，报错building for production…Error processing file: static/css/app.75b18747bd0b141856 解决 1、把webpack.prod.conf.js css代码压缩关掉 2、在urils.js 压缩 const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, mini
Vue 记一次打包错误： building for production...Error processing file: static/css/app.7dc218ade4b6d7ceea8bfea
Wjhsmart的博客
08-26 3993
本篇博客记录了如何解决vue项目打包报错： building for production...Error processing file: static/css/app.7dc218ade4b6d7ceea8bfea2e79024d9.css
postcss-svgo:使用PostCSS优化内联SVG
05-21
-svgo 使用PostCSS优化内联SVG。 安装 使用可以： npm install postcss-svgo --save 例子 输入 h1 { background : url ( 'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><cir
vue项目中引入svg的问题
ccxCode的博客
10-24 2539
最近在跟着一个网上的项目进行学习，遇到的第一个问题就是vue中使用svg图标。基于vue的组件化思想，项目中进行了开发了一个SvgIcon组件。在此，我们要先安装好"svg-sprite-loader"（这个之后要去学习一下这个库），反正装了这个loader能自动的为我们在#showroot生成一系列东西。 接下来遇到的问题是属于webpack中的配置问题，我曾天真的以为会智能的在webpack...
webpack打包报错
yrrjiayou的博客
11-10 595
Uncaught Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
Vue3+vite项目 引入svg图标并使用（封装svg组件）
蓝胖子的博客
03-26 1214
Vue3+vite项目 引入svg图标并使用（封装svg组件）
Vue - 解决运行时报错 Failed to compile with 1 errors（vue启动报错，可能没有错误信息也可能有错误信息，执行npm启动命令后打不开且报错，详细排查方案及解决教程）
最新发布
🏆 前端领域优质创作者
07-14 5757
Failed to compile with 1 errors，node 项目启动报 ERROR Failed to compile with 1 errors 错误，vue3，vue2，解决vue安装less报错Failed to compile with 1 errors的问题，vue 运行时报 Failed to compile with 1 errors，vue3报错，Vue运行时报错：ERROR Failed to compile with 1 errors，浏览器报错：Cannot GET /，
Vue-cli3使用svg-sprite-loader的vue.config配置（node_modules里有个svg导致一直报错）
xlzy
12-26 6402
chainWebpack: config =&amp;amp;amp;amp;amp;gt; { config.resolve.alias .set('@', resolve('src')); const svgRule = config.module.rule('svg'); // 找到svg-loader svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRul...
vue打包报错UnhandledPromiseRejectionWarning: postcss-svgo: Error in parsing SVG的解决方案
weixin_33971130的博客
11-30 3812
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue exports is not defined 问题解决（@svgdotjs/svg.js）
april_4的博客
05-06 5159
我又又又遇到了这个问题，参见上一篇文章，之前把babelrc改了，module改成默认commonjs，这次还是不行，这次是用到了一个库 @svgdotjs/svg.js ，用来生成svg的，代码中用到 const svg_js_1 = require("@svgdotjs/svg.js"); 试了修改babelrc，不行，后来想了个歪招，这种都是es6转es5出的错，索性直接把main....
Vue2项目引入矢量图报错（显示□）
笨蛋的博客
03-09 266
回到public文件夹下，只把iconfont样式文件引入，还是显示□。于是把下载的文件包装到此处，可以正常引用。常规来说，在assist文件夹下建立icon，并且把下载的文件包一股脑装进去，然后在main.js导入样式即可。但是我尝试多次无论是 APP.VUE或者main.js 均无效。
在vue中的js部分导入图片后通过webpack无法被正确打包的问题
RotatingBlock的博客
12-30 4023
具体描述 在vue组件的js部分导入图片要使用require的形式导入，否则webpack不能正常导入，因为其路径不符合其解析规范 原因 在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片 如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话
解决vue打包后静态资源路径错误的问题
2401_84435555的博客
04-27 2632
页面中引入资源的方式往往有如下几种* HTML标签中直接引入图片， 如* JS代码中定义资源路径属性，如* CSS代码中定义资源为背景图片，如上述三种资源加载方式还是有所区别的。前两种无论图片大小，都会使用url-loader加载器将其转化为base64编码的静态资源，而第三种方式则会根据webpack中配置的limit参数，动态选择符合大小要求的图片进行转码，此时则会导致不符合大小选择的图片加载失败，同时报出如下错误。
mui使用webpack时svg问题（postcss-svgo）
weixin_30745553的博客
11-16 494
webpack打包css时使用了svg，那么svg必须使用双引号的方式来包裹。 但是MUI的话默认是以单引号的方式，所以在用webpack打包的时候会出现错误。 这里找到 mui.css 文件，使用非压缩的版本，这样比较好找到svg使用双引号的位置，webpack打包后会压缩css。 将开头和结尾的单引号替换为双引号 再次编译即可 打开 /dist/index.ht...
关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题
weixin_46285310的博客
08-08 4012
今天进行打包之后遇到一个问题就是，打包上传到服务器里面，图片不显示，之后查了一下，最新的vue3里是这么进行配置的 打包： Vue项目创建好之后，右键在新终端中打开，注意一定要在项目的根目录里，输入npm run build 进行打包，等打包好之后，类似这样 左侧项目目录会出现一个dist文件夹，这就是你打包好之后的文件夹 当然你可以修改它的名称上传到服务器里进行访问，这就是打包 关于上传到服务器里显示空白和图片不显示怎么去做 网上大多都是有关于vue2及以下版本的配置，在build文.
在vue项目中配置使用svg
ngd-b的博客
09-16 1128
常使用svg作为图标使用已经很常见了,以下为几种使用方式 .
vue项目 打包后，找不到静态资源
05-01
<think>好的，我现在要解决用户的问题：Vue项目打包后静态资源无法加载，出现404或路径错误的情况。用户提到需要配置publicPath的解决方案。我需要结合用户提供的引用内容以及之前的对话内容来给出一个全面且清晰的回答。 首先，用户提供的引用内容中有多个解决方案，主要集中在修改Vue项目的配置文件和服务器配置。比如，引用1和2提到修改config/index.js中的assetsPublicPath为'./'，引用4也提到了同样的方法。而引用3则涉及Nginx服务器配置，特别是处理非根目录部署时的静态资源路径问题。此外，用户之前的提问是关于服务器返回错误MIME类型的问题，我在之前的回答中提到了Nginx的配置调整，这可能与当前问题有关联，尤其是在服务器配置方面需要特别注意。 接下来，我需要整理这些信息，分步骤给出解决方案。首先应该从Vue项目本身的配置入手，因为这是最直接的解决方案。修改publicPath（即assetsPublicPath）为相对路径'./'，确保打包后的资源路径正确。然后，针对不同版本的Vue CLI（比如2.x和3.x及以上）可能需要不同的配置文件位置，需要分别说明。 然后，用户可能遇到CSS中图片路径错误的问题，这时候需要调整build/utils.js中的ExtractTextPlugin配置，添加publicPath: '../../'，这样图片路径就能正确指向静态资源目录。这个在引用1中也有提到，需要确认是否正确应用。 接着，处理部署到子目录的情况，比如部署到非根目录时，publicPath需要设置为子目录路径，例如'/my-project/'，同时可能需要使用vue-router的base配置。这部分需要结合引用3中的Nginx配置，确保服务器正确指向子目录的静态资源。例如，Nginx中使用alias而非root，并设置正确的try_files规则，避免路由问题导致资源加载失败。 另外，用户可能遇到的服务器配置问题，比如Nginx配置错误，导致静态资源无法正确加载。需要检查服务器配置，确保正确设置了静态资源的路径和MIME类型，避免路径重写导致的问题。这可能涉及到之前回答中提到的MIME类型配置，确保.js和.css文件被正确识别。 此外，用户可能需要检查文件名哈希问题，比如是否因为浏览器缓存导致资源未更新，这时候可以考虑修改文件名哈希策略或清除缓存。同时，如果使用Vue CLI 3及以上版本，可能需要检查vue.config.js中的配置，覆盖默认的publicPath和assetsDir。 最后，总结常见问题，比如路径配置错误、服务器配置问题、部署目录不正确等，帮助用户系统地排查问题。同时，生成相关问题，帮助用户进一步解决可能遇到的其他问题，比如环境变量配置、history模式路由问题等。 需要确保回答结构清晰，步骤明确，并且参考了用户提供的引用内容，正确标注引用标识。同时，使用中文，符合格式要求，如行内数学表达式使用$...$，代码块使用正确语法，并添加相关问题部分。</think>针对Vue项目打包后静态资源路径错误或404问题，以下是综合解决方案（基于Vue CLI 2.x/3.x+）： --- ### 一、核心配置修改 1. **设置publicPath** - **Vue CLI 2.x** 修改$config/index.js$中的`assetsPublicPath`（确保路径为相对路径）[^1][^2][^4]： ```javascript build: { assetsPublicPath: './' // 从 '/' 改为 './' } ``` - **Vue CLI 3.x+** 在项目根目录创建$vue.config.js$，覆盖默认配置： ```javascript module.exports = { publicPath: './', // 关键配置 assetsDir: 'static', // 静态资源目录名 indexPath: 'index.html' // 入口文件路径 } ``` 2. **处理CSS内嵌资源路径** 在$build/utils.js$中添加CSS路径修正（针对CLI 2.x）[^1]： ```javascript if (options.extract) { return ExtractTextPlugin.extract({ publicPath: '../../', // 添加这一行修正相对路径 use: loaders, fallback: 'vue-style-loader' }) } ``` --- ### 二、服务器配置适配 #### 1. **Nginx部署示例**（含子目录场景）[^3] ```nginx location /subdir/ { # 部署到子目录/subdir/ alias /www/static/subdir/; try_files $uri $uri/ /subdir/index.html; # 必须包含子目录前缀 index index.html; # 处理静态资源 location ~* \.(js|css|png|jpg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public; } } ``` #### 2. **Apache部署** ```apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /subdir/ # 子目录路径 RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /subdir/index.html [L] </IfModule> ``` --- ### 三、进阶排查步骤 1. **检查打包产物结构** 确认$dist/static/$目录是否包含所有资源文件，若缺失需检查： - webpack的$file-loader$配置 - 资源引用方式（绝对路径需改为相对路径） 2. **处理动态路径资源** 对动态引用的资源使用`require`包装： ```javascript // 错误写法 imageUrl: '/static/logo.png' // 正确写法（webpack会处理路径） imageUrl: require('@/assets/logo.png') ``` 3. **文件名哈希处理** 在$vue.config.js$中配置缓存策略： ```javascript module.exports = { filenameHashing: true, // 启用哈希命名 configureWebpack: { output: { filename: 'static/js/[name].[hash:8].js', chunkFilename: 'static/js/[name].[hash:8].js' } } } ``` --- ### 四、常见错误场景 | 现象 | 解决方案 | 相关引用 | |-----------------------|-----------------------------|---------| | 首页白屏无报错 | 检查`publicPath`是否设置为`./` | [^1][^4]| | 背景图片404 | 修正CSS提取插件的`publicPath` | | | 路由刷新404 | 配置服务器fallback到index.html | [^3] | | 子目录部署资源错位 | Nginx使用`alias`代替`root` | [^3] | ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值