vue2使用svg的配置和流程

妖狐艹你老母 2023-10-04 19:04 15阅读 0赞

## 1.下载插件：svg-sprite-loader ##

cnpm install -S svg-sprite-loader

"dependencies": {
        "core-js": "^3.8.3",
        "vue": "^2.6.14",
        "element-ui": "2.13.2",
        "vuex": "3.1.0",
        "vue-router": "3.0.6"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "4.4.4",
        "@vue/cli-plugin-eslint": "4.4.4",
        "@vue/cli-plugin-unit-jest": "4.4.4",
        "@vue/cli-service": "4.4.4",
        "eslint": "^7.32.0",
        "sass": "1.26.8",
        "sass-loader": "8.0.2",
        "svg-sprite-loader": "4.1.3",
        "svgo": "1.2.2",
        "eslint-plugin-vue": "^8.0.3",
        "vue-template-compiler": "^2.6.14"
      },

##    2.创建svg组件(vue组件) ##

![7fb2820f90724beba6cb6acd8c264dd3.png][]

<template>
      <svg :class="svgClass" aria-hidden="true" :width="swidth" :height="sheight">
        <use :xlink:href="iconName" />
      </svg>
    </template>
     
    <script>
    export default {
      name: "SvgIcon",
      props: {
        iconClass: {
          type: String,
          required: true,
        },
        className: {
          type: String,
          default: "",
        },
        size: {
          type: [String, Number],
          default: 20,
        },
      },
      computed: {
        iconName() {
          return `#icon-${this.iconClass}`;
        },
        svgClass() {
          if (this.className) {
            return "svg-icon " + this.className;
          } else {
            return "svg-icon";
          }
        },
        swidth() {
          if (this.size < 0 || isNaN(this.size)) {
            return 20;
          }
          return this.size;
        },
        sheight() {
          if (this.size < 0 || isNaN(this.size)) {
            return 20;
          }
          return this.size;
        },
      },
    };
    </script>
     
    <style scoped>
    .svg-icon {
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

##    3.注册为全局组件及配置(js文件) ##

// 建议把当前文件放在svg目录平级

![f339c05499be454b8750def20fe2662e.png][]

import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg component
    
    // register globally
    Vue.component('svg-icon', SvgIcon)
    
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)

##    4.在main.js引入 ##

import '@/src/assets/mySvg/index.js';

![a8a86aa0128b427e9568c54a6dac7c3c.png][]

## 5.webpack.config.js或vue.config.js中配置 ##

![ba72c26bbcfe425da02334eaead2512d.png][]

'use strict'
    const path = require('path')
    
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    
    const name = 'vue Admin Template' // page title
    
    //定义cdn
    let cdn = { css: [], js: [] }
    // 通过环境变量 来区分是否使用cdn
    const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境
    let externals = {}
    if (isProd) {
      // 如果是生产环境 就排除打包 否则不排除
      externals = {
        'vue': 'Vue',
        'element-ui': 'ELEMENT',
        'xlsx': 'XLSX'
      }
      cdn = {
        css: [
          'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
        ],
        js: [
          'https://unpkg.com/vue@2.6.10/dist/vue.js',
          'https://unpkg.com/element-ui/lib/index.js',
          'https://cdn.jsdelivr.net/npm/xlsx@0.16.0/dist/xlsx.full.min.js',
          'https://cdn.jsdelivr.net/npm/xlsx@0.16.0/dist/jszip.min.js'
        ]
      }
    }
    
    module.exports = {
      /**
       * You will need to set publicPath if you plan to deploy your site under a sub path,
       * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
       * then publicPath should be set to "/bar/".
       * In most cases please use '/' !!!
       * Detail: https://cli.vuejs.org/config/#publicpath
       */
      publicPath: '/',
      outputDir: 'dist',
      assetsDir: 'static',
      lintOnSave: false,
      productionSourceMap: false,
      configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
          alias: {
            '@': resolve('src')
          }
        },
        externals: externals
      },
      chainWebpack(config) {
        // when there are many pages, it will cause too many meaningless requests
        config.plugins.delete('prefetch')
    
        // set svg-sprite-loader
        config.module
          .rule('svg')
          .exclude.add(resolve('src/icons'))
          .end()
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()
    
        config
          .when(process.env.NODE_ENV !== 'development',
            config => {
              config
                .plugin('ScriptExtHtmlWebpackPlugin')
                .after('html')
                .use('script-ext-html-webpack-plugin', [{
                  // `runtime` must same as runtimeChunk name. default is `runtime`
                  inline: /runtime\..*\.js$/
                }])
                .end()
              config
                .optimization.splitChunks({
                  chunks: 'all',
                  cacheGroups: {
                    libs: {
                      name: 'chunk-libs',
                      test: /[\\/]node_modules[\\/]/,
                      priority: 10,
                      chunks: 'initial' // only package third parties that are initially dependent
                    },
                    elementUI: {
                      name: 'chunk-elementUI', // split elementUI into a single package
                      priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                      test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                    },
                    commons: {
                      name: 'chunk-commons',
                      test: resolve('src/components'), // can customize your rules
                      minChunks: 3, //  minimum common number
                      priority: 5,
                      reuseExistingChunk: true
                    }
                  }
                })
              // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
              config.optimization.runtimeChunk('single')
            }
          )
      }
    }

##    6.使用 ##

// iconClass 的值是svg的名字 具体阅读svg.vue文件  
<svg-icon iconClass="serveStandard"></svg-icon>

![90e3d920ca0a421d80b617465983ceaa.png][]

### **最终效果：** ###

![f82e1845b09f4418ae00501695c915eb.png][]

[7fb2820f90724beba6cb6acd8c264dd3.png]: https://img-blog.csdnimg.cn/7fb2820f90724beba6cb6acd8c264dd3.png
[f339c05499be454b8750def20fe2662e.png]: https://img-blog.csdnimg.cn/f339c05499be454b8750def20fe2662e.png
[a8a86aa0128b427e9568c54a6dac7c3c.png]: https://img-blog.csdnimg.cn/a8a86aa0128b427e9568c54a6dac7c3c.png
[ba72c26bbcfe425da02334eaead2512d.png]: https://img-blog.csdnimg.cn/ba72c26bbcfe425da02334eaead2512d.png
[90e3d920ca0a421d80b617465983ceaa.png]: https://img-blog.csdnimg.cn/90e3d920ca0a421d80b617465983ceaa.png
[f82e1845b09f4418ae00501695c915eb.png]: https://img-blog.csdnimg.cn/f82e1845b09f4418ae00501695c915eb.png