在使用elenent-plus的自动导入的时候发现,每次当也面用到新的组件时就会触发重新编译,导致页面刷新
打开vite控制台发现下面输出
输出这个之后就活导致页面刷新
此时只要配置 vite的
optimizeDeps.include 属性即可
官网链接再这里依赖优化选项 | Vite 官方中文文档 (vitejs.dev)
export default defineConfig(() => {
// 这里只加入了element的有其他的也加在这里
const optimizeDepsElementPlusIncludes = ['element-plus/es'];
// 预加载element样式 有其他组件也是如此设置即可
fs.readdirSync('node_modules/element-plus/es/components').forEach(
(dirname: string) => {
fs.access(
// 其他框架这个路径根据控制台输出进行修改 有的项目时加载的是 css.mjs 有些是 index.mjs 这个路径vite控制台能够看出来
`node_modules/element-plus/es/components/${dirname}/style/index.mjs`,
(err: Error) => {
if (!err) {
optimizeDepsElementPlusIncludes.push(
`element-plus/es/components/${dirname}/style/index`,
);
}
},
);
},
);
return {
optimizeDeps: {
include: optimizeDepsElementPlusIncludes,
},
//... 其他配置
})