vue.config.js 配置 svg

太过爱你忘了你带给我的痛 2021-09-17 22:30 658阅读 0赞

### 1.   安装svg的loader ###

> npm install svg-sprite-loader --save-dev 
> 
> yarn add svg-sprite-loader

### 2.  根目录新建vue.config.js ###

vue.config.js 配置如下 (ps : 这是自己工作时的配置, 每个人的需求不同,按需配置即可)

const path = require('path');
    
    function resolve(dir) {
        return path.join(__dirname, dir);
    }
    
    module.exports = {
        baseUrl: './',
        outputDir: 'dist',
        lintOnSave: false,
        chainWebpack: config => {
            // 替换路径
            config.resolve.alias
                .set("views", resolve("src/views"))
            
            config.module
                .rule('images')
                .use('url-loader')
                .loader('url-loader')
                .tap(options => Object.assign(options, {
                    limit: 10240
                }));
    
            // 设置svg
            const svgRule = config.module.rule('svg')
            svgRule.uses.clear()
            svgRule
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({
                    symbolId: 'icon-[name]'
                })
    
        },
        productionSourceMap: true, // 生产生成 sourceMap 文件
        devServer: { 
            proxy: { // 代理
                "/api": {
                    target: "http://192.168.1.100:8080/",
                    ws: true,
                    changOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    },
                    // cookiePathRewrite: { // 是否携带cookie
                    //      '/svc-prod-app': '/'
                    // }
                },
            }
        }
    }

### 3.  使用 ###

我用的是滴滴的 mand-mobile 里面有配置svg

import "@/assets/svg/gou.svg";  // 引入
    
    <md-icon name="icon-gou"></md-icon> // 使用

发表评论取消回复

表情：

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

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

相关阅读

相关 vue安装svg 依赖包,配置全局svg组件

1，终端安装 npm npm install svg-sprite-loader --save-dev 2，自定义组件 ![202006111600488

朱雀/ 2023年02月17日 02:56/ 0 赞/ 330 阅读

相关 svg mysql_SVG介绍

SVG介绍 SVG是指可缩放矢量图(Scalable Vector Graphics)。SVG使用XML格式来定义图形。SVG可以直接嵌入到HTML页面中。位图和矢量图

柔情只为你懂/ 2022年10月26日 12:58/ 0 赞/ 220 阅读

相关 SVG

[使用SVG + CSS实现动态霓虹灯文字效果][SVG _ CSS] 早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素

迷南。/ 2022年06月03日 00:49/ 0 赞/ 311 阅读

相关【SVG】SVG快速入门

前言 SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是： 1. 矩形 2. 圆形 3. 椭圆形 4. 线段

- 日理万妓/ 2022年06月02日 07:20/ 0 赞/ 368 阅读

相关 SVG_SVG动画案例

尊重原创，欢迎转载，转载请注明： FROM GA\_studio [http://blog.csdn.net/tianjian4592][http_blog.

柔情只为你懂/ 2022年05月24日 05:57/ 0 赞/ 363 阅读

相关【svg】svg动画

如果你之前没有接触过svg，可以看下这个简略图：[ https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a][

àì夳堔傛蜴生んèń/ 2022年05月18日 07:51/ 0 赞/ 322 阅读

相关 SVG

俗话说得好：最好的学习方法是兴趣引导的学习，在学习SVG之前，先给你们看看一些实例，让你们领略一下SVG的强大，看看能不能激发出你们的学习兴趣。 [https://www.

喜欢ヅ旅行/ 2022年05月03日 03:58/ 0 赞/ 413 阅读

相关 SVG

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准

Love The Way You Lie/ 2021年11月10日 06:32/ 0 赞/ 342 阅读

相关 vue.config.js 配置 svg

1. 安装svg的loader > npm install svg-sprite-loader --save-dev > > yarn add svg-sprit

太过爱你忘了你带给我的痛/ 2021年09月17日 22:30/ 0 赞/ 659 阅读

相关 svg 基本配置和使用

svg文件在浏览器打开就可查看在html中使用第一种将svg文件按照src来引入使用如

迷南。/ 2021年07月24日 23:26/ 0 赞/ 594 阅读