vue-clie 2.9 升级到 @vue/cli 4.3.1 后，svg-sprite-loader 无法处理svg文件报错

Question

最近想把项目脚手架从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"
  ]
}

Answer 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('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]'
})
.end()