vue-cli2.0,vue-cli3.0中使用svg
前言：
vue中和我们传统的页面是不同的，svg不可以直接使用，我们这里说说2.0,3.0脚手架搭建的项目中优雅的使用svg的办法；
vue-clli2.0搭建的项目：
第一：安装依赖
npm install svg-sprite-loader --save-dev第二：配置build文件夹中的webpack.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],//1、添加这句
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{//2、把地下这个对象添加进去
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},第三：在src/components下新建文件夹及文件SvgIcon/index.vue
这是位置图，index.vue代码：
第四：在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下
index.js:
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
第五：在main.js中引入svg
import './icons'
第六：在svg文件夹中放张svg图，并在页面中调用，
vue-clli3.0搭建的项目：
第一：安装svg-sprite-loader和file-loader,配置vue.config.js
本来只添加svg-sprite-loader就行了，但是svg也是图片的一种，所以file-loader也会对其进行处理，所以就会冲突，解决的办法就是，在项目中新建一个文件icons，使用file-loader编译svg的时候不编译icons里面的图标
const path = require('path')
module.exports = {
// 关闭内置Eslint检查
lintOnSave: false,
// 打包输出路径
publicPath: process.env.NODE_ENV === 'production' ? '/test/guohua/' : '/', //2019.9.16 zwh测试打包以后资源路径问题注释
// publicPath: './', //2019.9.16 zwh测试打包以后资源路径问题添加
productionSourceMap: false,//不要打包以后的map文件-zwh
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
/**这里之后，还有第一行的path是跟svg有关系的配置**/
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './src/icons'))
.end()
.use('file-loader')
.loader('file-loader')
}
}第二：根目录创建icons文件夹，来放所有的svg文件，跟2.0一样，这几步
第三：src / components / IconSvg.vue ,跟2.0一样，这几步
IconSvg.vue:
第四：在main.js中引入并注册
//引入svg组件
import IconSvg from './components/IconSvg'
// //全局注册icon-svg
Vue.component('icon-svg', IconSvg)第五：页面中引入svg，并使用（因为这个是按需引入，并不是2.0的全部引入）
//icon-class是icons里面的svg名字
import '@/icons/PartyGroup/zbzl_1.svg' //引入是icons里面的svg到这里，2.0,3.0脚手架搭建的项目中使用svg的方法就结束了，我自己目前使用的就是这样的方法,下面是参考文档地址：
3.0vue-cli+svg: https://www.jianshu.com/p/1150876dfa04
2.0vue-cli+svg: https://www.cnblogs.com/shenyf/p/10370949.html