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 })
  },
  // 下面可以寫其他配置
  // ...
};