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

发布于 09-12 02:49 字数 4424 浏览 24 评论 0

最近想把项目脚手架从2.9升级到4.3.1,升级后发现两个问题:

1、es6语法没有转化成es5

chrome 浏览器debugger后,看到源代码仍是 es6 语法,如:

function(...parms) {

}

2、loader 配置规则后,打包svg仍报错。

错误信息如下:
err.png

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"
  ]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤千羽2022-09-19 02:49:26
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()
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文