vue-cli3使用vue-svg-loader加载svg

分手后的思念是犯贱 2021-12-22 07:25 882阅读 0赞

## vue-svg-loader ##

*  [Documentation - FAQ][]

> webpack loader that lets you use SVG files as Vue components

## Microsoft Edge 报错问题 ##

在 Microsoft Edge 存在ES6`spread & rest`语法无法转译的问题

Error: Expected identifier, string or number     
    Uncaught SyntaxError: Unexpected token ...

### 解决方法 ###

> 添加`babel-loader`进行语法转译

const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule
          .use('babel-loader')
          .loader('babel-loader')
          .end()
          .use('vue-svg-loader')
          .loader('vue-svg-loader')
          .options({
            svgo: {
              plugins: [
                { removeDoctype: true },
                { removeComments: true },
                { removeViewBox: false }
              ],
              removeViewBox: false,
            },
            .end()
          })

### 参考 ###

*  [Edge support issue][]

转载于:https://www.cnblogs.com/iPing9/p/11016792.html

[Documentation - FAQ]: https://vue-svg-loader.js.org/
[Edge support issue]: https://github.com/visualfanatic/vue-svg-loader/issues/63

发表评论取消回复

表情：

评论列表（有 0 条评论，882人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet使用SVGOverlay来加载svg文件（116）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第116个 [点击查看专栏目录][Link 1]

深藏阁楼爱情的钟/ 2024年03月25日 19:59/ 0 赞/ 35 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 277 阅读

相关使用 SVG 制作加载动画

![format_png][] 最近我们设计师反馈，他想要做如下的一个加载动画。但是要么效果好的导出的 GIF 体积特别大，看了下有 8M 多了，要么体积小的 GIF

缺乏、安全感/ 2022年12月09日 04:59/ 0 赞/ 203 阅读

相关 234.预加载SVG动画

效果 (源码网盘地址在最后) ![094015a4e0896e44d520bd13301d1d2f.gif][] 源码 index.html <!DOC

梦里梦外;/ 2022年09月11日 13:21/ 0 赞/ 131 阅读

相关使用 SVG 实现一个漂亮的页面预加载效果

今天我们要为您展示如何使用 CSS 动画， SVG 和 JavaScript 创建一个简单的页面预加载效果。对于[网站][Link 1]来说，这些预载入得画面提供了一种创造性的

秒速五厘米/ 2022年08月07日 04:39/ 0 赞/ 136 阅读

相关【javascript】webpack 加载svg

标签（空格分隔）： webpack -------------------- 如何在我们的项目中加载svg矢量图？使用file-loader 比如像ske

川长思鸟来/ 2022年02月20日 12:43/ 0 赞/ 431 阅读

相关 vue-cli3使用vue-svg-loader加载svg

vue-svg-loader [Documentation - FAQ][] > webpack loader that lets you use SVG fil

分手后的思念是犯贱/ 2021年12月22日 07:25/ 0 赞/ 883 阅读

相关手把手教你优化vuecli首屏加载

之前用 `vuecli`做了个博客，是一个单页面项目，大概有十个路由直接 `npm run build`打包出来，有一个 `1M`的巨大 `js`文件 ![172085

不念不忘少年蓝@/ 2021年12月21日 01:03/ 0 赞/ 334 阅读

相关 svg自己记得动态加载path

https://segmentfault.com/a/1190000007811310?utm\_source=tag-newest 通过上述作者知道了一些东西以

刺骨的言语ヽ痛彻心扉/ 2021年10月23日 11:50/ 0 赞/ 371 阅读

相关 VueCli3中加载Cesium.js

更多Cesium示例代码：[https://sandcastle.cesium.com/][https_sandcastle.cesium.com] 首先下载Cesium.

缺乏、安全感/ 2021年07月25日 11:54/ 0 赞/ 1412 阅读