所有基于 vitepress-plugin-slot-inject-template 的插件(如:vitepress-plugin-back2top 等)均无法在 VitePress 2.0.0-alpha.20 开始的版本中使用。
报错内容:
[Vue warn]: Failed to resolve component: ImagePreview
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Layout>
at <Layout>
at <VitePressApp>
原因:
在新版的 vitepress/dist/client/theme-default/Layout.vue 文件中,开头的 <script setup lang="ts"> 被换成了 <script setup>,导致 import ${componentName} from './${componentName}.vue 语句无法成功添加进去。
说实话,我一直觉得 vitepress-plugin-slot-inject-template 的这种魔改 VitePress 的 Layout.vue 源文件的方式非常 hacker,可能有更优雅的方式,比如使用 @vue/compiler-sfc 对 vue 组件进行更深度的解析等。因为 Layout.vue 文件并不是公开的 API,假设下次 VitePress 把 Layout.vue 改个文件名或者换个位置,或者把插槽的模板内容稍微换一下,可能就会导致这里所有的插件都挂了。
此外,我注意到这里插件的 vue 组件在发布到 npm 后大多都是直接保留了 <script setup lang="ts">,也就是说下游项目用户必须要装 TypeScript 才能构建项目。我之前在云端服务器每次执行安装依赖时都是可以不用安装 TypeScript 依赖的但是现在要装 TypeScript 才能构建项目了。经我查询得知有一个 mkdist 或 vue-sfc-transformer库可以在构建时将 lang="ts" 的 vue 组件剥离为纯JS vue组件,并附带它的.d.ts文件,可以尝试一下。
所有基于 vitepress-plugin-slot-inject-template 的插件(如:vitepress-plugin-back2top 等)均无法在 VitePress 2.0.0-alpha.20 开始的版本中使用。
报错内容:
原因:
在新版的 vitepress/dist/client/theme-default/Layout.vue 文件中,开头的
<script setup lang="ts">被换成了<script setup>,导致import ${componentName} from './${componentName}.vue语句无法成功添加进去。说实话,我一直觉得 vitepress-plugin-slot-inject-template 的这种魔改 VitePress 的 Layout.vue 源文件的方式非常 hacker,可能有更优雅的方式,比如使用 @vue/compiler-sfc 对 vue 组件进行更深度的解析等。因为 Layout.vue 文件并不是公开的 API,假设下次 VitePress 把 Layout.vue 改个文件名或者换个位置,或者把插槽的模板内容稍微换一下,可能就会导致这里所有的插件都挂了。
此外,我注意到这里插件的 vue 组件在发布到 npm 后大多都是直接保留了 <script setup lang="ts">,也就是说下游项目用户必须要装 TypeScript 才能构建项目。我之前在云端服务器每次执行安装依赖时都是可以不用安装 TypeScript 依赖的但是现在要装 TypeScript 才能构建项目了。经我查询得知有一个 mkdist 或 vue-sfc-transformer库可以在构建时将 lang="ts" 的 vue 组件剥离为纯JS vue组件,并附带它的.d.ts文件,可以尝试一下。