vue-cli3 配置loader

本文详细介绍了在Vue CLI 3中通过vue.config.js文件配置loader的方法,包括如何使用expose-loader暴露全局变量及如何配置iview-loader解决iView组件前缀问题。提供了两种配置方式,帮助开发者更好地理解和应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-cli3 vue.config.js中如何配置loader

该配置方法可以配置多个loader, 代码如下

  1. 方法一
module.exports = {
  chainWebpack: config => {
    config.module
        .rule('expose1')
        .test(require.resolve('jquery'))
            .use()
            .loader('expose-loader')
            .options("jQuery")
            .end()
    config.module
        .rule('expose2')
        .test(require.resolve('jquery'))
            .use()
            .loader('expose-loader')
            .options("$")
            .end()
    config.module
      .rule("vue")
      .use("iview-loader") // 解决ivew组件 忽略前缀i的问题
      .loader("iview-loader")
      .options({
        prefix: false,
      })
      .end();
  }
}
  1. 方法二
module.exports = {
// 没有使用 iview-loader 时,必须使用 i-switch 标签。
  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.vue$/,
      use: [{
        loader: 'iview-loader', // 解决ivew组件 忽略前缀i的问题
        options: {
          prefix: false
        }
      }]
    })
  },

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值