vue-clie 2.9 升级到 @vue/cli 4.3.1 后,svg-sprite-loader 无法处理svg文件报错
最近想把项目脚手架从2.9
升级到4.3.1
,升级后发现两个问题:
1、es6
语法没有转化成es5
;
chrome
浏览器debugger后,看到源代码仍是 es6
语法,如:
function(...parms) {
}
2、loader
配置规则后,打包svg仍报错。
错误信息如下:
2.9 配置规则如下:
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test') ,resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
4.3.1 配置规则如下:
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
config.module
.rule('url-loader')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.exclude
.add(resolve('src/icons')) //处理svg目录
.end()
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: assetsPath('img/[name].[hash:7].[ext]')
})
config.module
.rule('js')
.test(/\.js$/)
.include
.add(resolve('src'))
.add(resolve('test'))
.add(resolve('node_modules/webpack-dev-server/client'))
.end()
.use('babel-loader')
.loader('babel-loader')
config.module
.rule('media')
.test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: assetsPath('media/[name].[hash:7].[ext]')
})
config.module
.rule('font-loader')
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: assetsPath('fonts/[name].[hash:7].[ext]')
})
补充 package.json 内容
{
"name": "newclient",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@aspnet/signalr": "^1.1.4",
"@babel/polyfill": "^7.8.7",
"@riophae/vue-treeselect": "0.0.36",
"axios": "0.17.1",
"babel-polyfill": "^6.26.0",
"better-scroll": "^1.15.2",
"core-js": "^3.6.4",
"dayjs": "^1.8.12",
"echarts": "^4.3.0",
"element-ui": "^2.8.2",
"himmas-vue-calendar": "^1.3.3",
"jquery": "^2.2.3",
"js-cookie": "2.2.0",
"js-md5": "^0.7.3",
"lodash": "^4.17.11",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"simple-uploader.js": "^0.5.1",
"spark-md5": "^3.0.0",
"text-mask-addons": "^3.8.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^3.1.3",
"vue-i18n": "^8.10.0",
"vue-layer": "^0.9.9",
"vue-multiselect": "^2.1.0",
"vue-router": "3.0.1",
"vue-snotify": "^3.2.1",
"vuex": "3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"autoprefixer": "^9.8.0",
"babel-eslint": "^10.1.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"copy-webpack-plugin": "4.2.3",
"eslint": "^6.7.2",
"eslint-plugin-html": "^6.0.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.7.2",
"postcss-import": "11.0.0",
"postcss-loader": "2.0.9",
"postcss-url": "7.3.0",
"sass-loader": "6.0.6",
"svg-sprite-loader": "3.5.2",
"url-loader": "^4.1.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
你把上面的这块替换一下