vue-cli3使用vue-svg-loader加載svg

vue-svg-loader

• Documentation - FAQ

webpack loader that lets you use SVG files as Vue components

Microsoft Edge 報錯問題

在 Microsoft Edge 存在ES6spread & rest語法無法轉譯的問題

Error: Expected identifier, string or number     
Uncaught SyntaxError: Unexpected token ...

解決方法

添加babel-loader進行語法轉譯

const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [
            { removeDoctype: true },
            { removeComments: true },
            { removeViewBox: false }
          ],
          removeViewBox: false,
        },
        .end()
      })

參考

• Edge support issue