在vue專案中優雅的使用Svg

本文主要以 vue-cli3 搭建的專案為例，來聊一下如何在專案中更優雅的使用 svg 。

眾所周知， vue-cli3 已經推出很長一段時間了，大家可以感受一下 vue-cli3 帶來的零配置體驗。but，也相應帶來了一些弊端，就是如歸需要修改預設的 loader 時，會比較麻煩。

好了，上正題，建議看此文章之前先去看一下張旭鑫大神的未來必熱：svg sprite技術介紹，那麼我們接下來主要使用的就是上文中提到的 svg 的 use ，先上一張 vue-cli3 搭建的專案的目錄，可以看到根目錄下只保留了 public/ 以及 src/ ，可以說非常乾淨，大家可以自己建立乙個。

在 src/components/ 下建立 svgicon 元件
在 src/ 下建立乙個 icons 目錄，目錄結構如下：
svg 目錄主要用於存放 svg 檔案，來看一下 index.js 的內容，功能就是把元件註冊到全域性，方便使用：
import vue from 'vue'
import svgicon from '@/components/svgicon' // svg元件
// 註冊到全域性
vue.component('svg-icon', svgicon)
const requireall = requirecontext => requirecontext.keys().map(requirecontext)
const req = require.context('./svg', false, /\.svg$/)
requireall(req)

在 main.js 中引入

這一步就沒什麼好說的了，如果需要註冊到全域性，需要在入口檔案中引入。

好了，接下來是最重要的一步：

修改預設的 loader :

大家可以去vue-cli3官網去檢視具體教程，這裡我只說需要修改的 loader 以及具體的**實現。

首先需要注意的是，通過 vue-cli3 構建的專案可以初始化進行很多選擇，我構建的目錄更多的是以 *.config.js 的形式存在的。

在根目錄下建立乙個名為 vue.config.js 檔案，接下來的操作都和它有關，先來看一下它完整的**：

const path = require('path')
function resolve (dir) 
module.exports = "`
return args
})// svg rule loader
const svgrule = config.module.rule('svg') // 找到svg-loader
svgrule.uses.clear() // 清除已有的loader, 如果不這樣做會新增在此loader之後
svgrule.exclude.add(/node_modules/) // 正則匹配排除node_modules目錄
svgrule // 新增svg新的loader處理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options()
// 修改images loader 新增svg處理
const imagesrule = config.module.rule('images')
imagesrule.exclude.add(resolve('src/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
},configurewebpack: ,
'/live': ,
},},
},}

大家忽略無關緊要的**，重點從 svg rule loader 注釋開始，其實注釋已經比較詳細了，就是獲取預設的 loader 並進行相關的修改，主要有 svg-loader 、 images-loader ，從 vue-cli3 基礎loader 中可以找到這兩個 loader 的預設配置。

/ 預設的svg loader...
webpackconfig.module
.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('file-loader')
.loader('file-loader')
.options()
// 預設的images loader...
webpackconfig.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options(genurlloaderoptions('img'))

對比我一開始的**可以看出，我把預設的 svg loader 配置中使用的 file-loader 改為了 svg-sprite-loader ，並排除了 node_modules ，把預設的 images-loader 配置新增了 svg ，並排除了 src/icons 目錄。

在vue專案中優雅的使用Svg

專案中優雅的使用svg

Vue專案中操作svg檔案

vue專案svg使用

在vue專案中優雅的使用Svg

專案中優雅的使用svg

Vue專案中操作svg檔案

vue專案svg使用

相關推薦