这段配置做了以下几件事: 清除了默认的SVG处理规则。 添加了svg-sprite-loader来处理SVG文件。 设置了SVG图标的ID格式为icon-[name]。 添加了SvgSpriteLoaderPlugin来生成SVG精灵图。 3. 在vue3组件中引入SVG图标 现在你可以在Vue组件中引入SVG图标了。假设你有一个名为icon.svg的图标文件,你可以在组件中这样引...
npmisvg-sprite-loader 3、配置 vue.config.js module.exports= {// 配置使用stylus全局变量chainWebpack: config => {constsvgRule=config.module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId:"icon-[name]"}) .end()...
import "@/svgIcon/index" import svgIcon from "@/svgIcon/index.vue"; createApp(App).component("svg-icon", svgIcon).mount('#app') 1. 2. 3. 4. 5. 6. 7. 8. 三,配置vue.config.js使支持访问svg vue.config.js module.exports = { chainWebpack: config => { const svgRule = config...
import'@/icons'// icon 五、配置 vue.config.js(主要为打包进行设置) constpath=require('path')// 将传入的相对路径转换成绝对路径functionresolve(dir){returnpath.join(__dirname,dir)}module.exports={chainWebpack(config){// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src...
1、先用 vue-cli 创建一个空项目 使用vue create project-name 命令创建一个默认的项目,这个是区别于 cli2.0 的,需要注意下 vue create vue-demo cd vue-demo 2、安装 svg-sprite-loader 依赖 npminstall--save-dev svg-sprite-loader 3、在根目录创建 vue.config.js,并在 vue.config.js 中输入如下配置 ...
webpack 配置,在Vue.config.js加⼊处理 svg 的 loader：const path = require('path')function resolve(dir) { return path.join(__dirname, '.', dir)} module.exports = { chainWebpack: config => { config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,//const svgRule = config...
参考文章vue-cli3中webpack 相关配置 // vue.config.js const path = require('path') module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader。 // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
安装及配置方法 一、安装组件svg-sprite-loader npm install svg-sprite-loader --save-dev 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue中内容如下 <template><svg:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>export defau...
Vue.component('svg-icon', svgIcon) // 注册全局组件 const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req) 1. 2. 3. 4. 5. 6.