vue3 开发遇到的问题
记录使用vue3遇到的一些问题,比较与vue2的差异。
一、vite打包vue3编译报错
问题描述
并且开始的时候卡顿了一段时间:
node_modules/_@vue_reactivity@3.2.37@@vue/reactivity/dist/reactivity.d.ts:26:15 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
26 readonly [ReactiveFlags.IS_READONLY]: boolean;
~~~~~~~~~~~~~
node_modules/_@vue_runtime-core@3.2.37@@vue/runtime-core/dist/runtime-core.d.ts:1224:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1224 [BooleanFlags.shouldCast]?: boolean;
~~~~~~~~~~~~
node_modules/_@vue_runtime-core@3.2.37@@vue/runtime-core/dist/runtime-core.d.ts:1225:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1225 [BooleanFlags.shouldCastTrue]?: boolean;
~~~~~~~~~~~~
原因分析:
可以看到都是node_modules开头的错误:
从头看,npm run build
执行了两条命令
vue-tsc --noEmit && vite build
卡顿点在这里
vue-tsc --noEmit
vue-tsc 是 基于 IDE 插件Volar的 Vue 3 命令行类型检查工具
检查了node_moudles的内容,那么 我忽略他是不是就好了呢?
在网上搜索了一下发现加上 --skipLibCheck
可以解决.
我觉得可能是一些版本兼容导致的。
解决方案:
{
"script": {
"build": "vue-tsc --noEmit --skipLibCheck && vite build"
}
}
参考
https://www.modb.pro/db/114083
二、vue3 transition+route-view+keep-alive 一起使用
vue3 中 view-view
提供了插槽,所以我们可以这么使用
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'fade'" :mode="route.meta.transitionMode || 'out-in'">
<keep-alive>
<component :is="Component" :key="route.path" /> // 注意这里的key,是中文会导致缓存不成功
</keep-alive>
</transition>
</router-view>