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