iview Switch组件不显示问题——iview-loader配置

对于使用iview的项目，如果在<template>中直接使用<Switch>组件，会发现它显示不出来。

原因是没有使用iview-loader的话，<Switch>和<Circle>组件受Vue限制，只能使用<i-switch>和<i-circle>代替。

 

iview官方对此提供了webpack的配置，但是没有提供vue-cli（vue.config.json）配置，所以我来分享一下如何在vue-cli项目中配置iview-loader。

1. 安装iview-loader

npm install iview-loader --save-dev

2. 修改vue.config.js，使用chainWebpack加载插件

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('iview')
      .loader('iview-loader')
      .options({ prefix: false })
  },
  // 下面可以写其他配置
  // ...
};