解决vue cli3脚手架+elementui组件在线上icon乱码问题

1、下载依赖css-unicode-loader 和sass-loader

npm install css-unicode-loader --save-dev

npm install sass-loader --save-dev

2、在vue.config.js中配置

 // 解决打包线上icon乱码问题

  configureWebpack: config => {

    config.resolve.alias['@'] = resolve('src')

    // 下载依赖并配置css-unicode-loader函数写法

    config.module.rules.filter(rule => {

      return rule.test.toString().indexOf('scss') !== -1;

    }).forEach(rule => {

      rule.oneOf.forEach(oneOfRule => {

        oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,

          { loader: require.resolve('css-unicode-loader') })

      })

    })

  },

改变原有的写法,改为上面的写法,重新启动项目即可解决乱码问题

你可能感兴趣的:(vue.js,elementui,前端)