根据官网说的,如果有用ts,就要配合ts-import-plugin按需加载才生效
main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from 'vant';
createApp(App).use(store).use(router).use(Vant).mount("#app");
vue.config.js
const {merge} = require('webpack-merge')
const tsImportPluginFactory = require('ts-import-plugin')
//来自vant官方demo里面的,我就是从那边拿过来配置的,并且实践
module.exports = {
devServer: {
// 端口号
port: 3030,
},
chainWebpack: config => {
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;
});
}
}
在 package.js 里面配置分析图
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report",
"lint": "vue-cli-service lint"
},
最后打包出来上图
因为我就用了那么2-3个组件,所以已经成功可以按需加载了,完美