Vue3 + TypeScript项目构建之VantUI(V3版本)按需引入

1,263 阅读1分钟

1、安装所需插件

1.1 ts-import-plugin

npm i ts-import-plugin -D 因为使用的是typescript,所有就不用babel-plugin-import插件了

1.2 webpack-merge

npm i webpack-merge --save-dev

2、在vue.config.js里进行配置

const tsImportPluginFactory = require('ts-import-plugin')
const { merge } = require('webpack-merge')

module.exports = {
	chainWebpack(config) {
    // 配置VantUI按需引入
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        })
        return options
      })
   }   
}

3、可能会出现的问题

3.1 ERROR TypeError: merge is not a function

该错误原因是引入webpack-merge时没有进行解构赋值(已踩坑)

3.2 ERROR TypeError: Cannot read property 'tapPromise' of undefined

该错误出现原因是如果你安装了compression-webpack-plugin插件,并且在7.0.0以上版本。 解决方案是把该插件降低版本,我降到了6.0.2