svg-sprite-loader本地预览项目时报错---->无语的npm写死版本

1.svg-sprite-loader的介绍

处理svg的图片，然后变成一个可操作的dom元素。

2.install

• svg-sprite-loader

yarn add svg-sprite-loader -D

• svgo

yarn global add svgo

3.webpack的配置

3.1 vue中

//package.json中
{
  "name": "wangcai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "3.4.4",
    "dayjs": "1.8.20",
    "register-service-worker": "1.6.2",
    "vue": "2.6.10",
    "vue-class-component": "7.0.2",
    "vue-property-decorator": "8.3.0",
    "vue-router": "3.1.3",
    "vuex": "3.1.2"
  },
  "devDependencies": {
    "@types/jest": "24.0.19",
    "@vue/cli-plugin-babel": "4.1.0",
    "@vue/cli-plugin-eslint": "4.1.0",
    "@vue/cli-plugin-pwa": "4.1.0",
    "@vue/cli-plugin-router": "4.1.0",
    "@vue/cli-plugin-typescript": "4.1.0",
    "@vue/cli-plugin-unit-jest": "4.1.0",
    "@vue/cli-plugin-vuex": "4.1.0",
    "@vue/cli-service": "4.1.0",
    "@vue/eslint-config-typescript": "4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-loader": "8.2.2",
    "eslint": "5.16.0",
    "eslint-plugin-vue": "5.0.0",
    "lint-staged": "9.5.0",
    "sass": "1.23.7",
    "sass-loader": "8.0.0",
    "svg-sprite-loader": "4.1.6",
    "svg-sprite-loader-mod": "4.1.6-mod1",
    "svgo-loader": "2.2.1",
    "typescript": "~3.7.5",
    "vue-template-compiler": "2.6.10"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,vue,ts}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

改完package后一定要yarn install！！！！！

//vue.config.js
const path = require('path')

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/wangcai-website/'
    : '/',
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() // 包含 icons 目录
      .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract: false}).end()
      .use('svgo-loader').loader('svgo-loader')
      .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

4.封装Icons

引入一个文件夹的所有SVG图片

let importAll = (requireContext: __WebpackModuleApi.RequireContext) 
=> requireContext.keys().forEach(requireContext);

try {importAll(require.context('../assets/icons', true, /\.svg$/));} 
catch (error) {console.log(error);}

5.svg的使用

vue：

<svg class="icon">
    <use v-bind:xlink:href="'#'+iconName" />
    //<use xlink:href="#logo">
</svg>