Closed fakaka closed 6 years ago
这样配置了,但是还是会解析其他的svg文件
chainWebpack: config => {
config.module
.rule('url-loader')
.exclude.add('./src/icons')
.end()
config.module
.rule('svg')
.test(/\.svg$/)
.include.add('src/icons').end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.loader('babel-loader')
.options({
symbolId: 'icon-[name]'
})
}
@GitHdu 不行啊,还想加载的旧的svg格式
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add('./src/icons')
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add('.src/icons')
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
}
@PanJiaChen 可以了,谢谢!!!
你好,方便看下你的vue.config.js配置吗,我的图标还是出不来,无法解析
@Fun005 我这样就行了,你把你的发出来看看
module.exports = {
devServer: {
port: 3001
},
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
}
}
var path = require('path')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
可以了,谢谢~ 我没有加resolve,所以解析不到。再次感谢~
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('file-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'icon-[name]' })
}
请问我按照这样的配置为什么会出错呢 我的配置
// 配置svg-sprite-loader
config.module
.rule('svg')
.exclude.add('./src/icons')
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add('./src/icons')
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
报错信息是这样的 ERROR WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
const resolve = dir => path.join(__dirname, dir); 加上它试试 @TianTang-TT eg:.include.add(resolve("./src/icons"))
@MrTenger 多谢,就是这么解决的
config.module
.rule('svg')
.exclude.add(path.resolve(__dirname, 'src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(path.resolve(__dirname, 'src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
补充一下,icons下的index.js 这段代码比不可少:
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
-------下面的语句没理解怎么起作用的,但是绝对不能少的
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
@Fun005 我这样就行了,你把你的发出来看看
module.exports = { devServer: { port: 3001 }, chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } } var path = require('path') function resolve(dir) { return path.join(__dirname, './', dir) }
解决了我的问题,thks
Vue.component('svg-icon', SvgIcon)
vue3这句会报错,如何改造?
我自己目前是用 vue-svg-loader 勉强使用 svg,很难受。搞不定 svg-sprite-loader 在vue-cli3.0 里面的配置