vue 中 引入和使用 svg、报错处理( 记账项目 )

hunter555
642 阅读1分钟

Vue中的 svg 需要进行一些特殊的配置

一、如果在 Vue 中是用 ts 写的项目 需要在 shims-vue.d.ts 中尾部添加：

     declare module '*.svg'
     {
      const content:string;
      export default content;
     }

二、安装 svg-sprite-loader

 npm install svg-sprite-loader -D
  #
 yarn add svg-sprite-loader -D
 
 npm install svg-sprite-loader@版本号 -D   //安装固定版本

三、vue.config.js\` 中配置

const path = require('path')

module.exports = {
  chainWebpack: config =>{
    const dir = path.resolve(__dirname, 'svg文件存放的路径')

    config.module
     .rule('svg-sprite')
     .test(/\.svg$/)
     .include.add(dir).end()
     .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir)
  }  
}

四、第三步完成就可以在vue中使用svg了

  1. 引入 import x from '@/assets/icons/Lable.svg'

  2. 使用 <svg> <use xlink:href="#Lable" /> </svg>


但是我们会发现两个问题：1. 每一个 svg 我们都要去 import 一次，有十张 svg 我们就要去 import 10次，很麻烦！

  1. 使用 <svg> <use xlink:href="#Lable" /> </svg> 很冗长

为此需要去封装一个Icon.vue组件

五、封装 Icon.vue 组件

//当需要使用图标时，只需要引入<Icon/> 组件即可。  当然也需要局部或者全局定义，引入。
<template>
 <svg class="icon">
   <use :xlink:href="'#' + name" />
 </svg>
</template>

<script lang="ts">
let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
 requireContext.keys().forEach(requireContext);
try {
 importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
console.log(error);
}

export default {
props: ["name"],
name: "Icon",
};
</script>

六、 如何解决 svg 无法通过 css 改变颜色的问题

这个问题的原因是，由于有颜色的 svg 默认有 fill=" " 这个属性，所以就不能再通过css去修改它的颜色。想要修改可以把 fill=" " 删除。 但是一旦 svg 数量过多，这个操作就很麻烦, 所以要用到 svgo-loader

安装：svgo-loader

npm install svgo-loader --save-dev
   #
yarn add svgo-loader -D

在 vue.config.js 进行配置

注意这里只需要在先前我们配置 svg-sprite-loader 第 三步 时的代码内增加两行代码即可：

const path = require('path')

    module.exports = {
      chainWebpack: config =>{
        const dir = path.resolve(__dirname, 'svg文件存放的路径')

        config.module
         .rule('svg-sprite')
         .test(/\.svg$/)
         .include.add(dir).end()
         .use('svg-sprite-loader').loader('svg-sprite-loader').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/plugin'), [{plainSprite: true}])
        config.module.rule('svg').exclude.add(dir)
      }  
    }

git commit时报错处理

一、 error: '__WebpackModuleApi' is not defined (no-undef)

解决方法在 eslintrc.js 中的 module.exports 内( 最好在末尾 ) 添加如下代码：

'globals': {
    '__WebpackModuleApi': true
  }

类似： XXX is not defined no-undef 报错也可以使用该方法解决


二、error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at vue.config.js:1:14:

//在 vue.config.js 中
>  const path = require('path')
>                ^

.eslintrc.js文件中的 rules 属性新增以下内容：


rules: {
  ...  // 这里表示里面的其它属性不是代码内容
  
  '@typescript-eslint/no-var-requires': 0,  //只有这个才是新增的
}
avatar
文章
阅读
粉丝