【web-music】vue3 开发遇到的问题

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>

---