编译的时候自动运行了部分代码？ #4835
编译的时候自动运行了部分代码？
#4835
-
|
我替换了 NormalPage 组件（实际上就是把原版的复制过来加了动态加载判断），然后 build 的时候输出了好几遍我写的 console.log(e)，数量刚好是所有开着评论区的页面。build 本身是正常的。是 vite 编译的时候要运行代码，还是某个插件造成的吗？ 我的组件： import type { HeaderLevels } from "@vuepress/helper/client";
import { hasGlobalComponent } from "@vuepress/helper/client";
import type { ComponentOptions, SlotsType, VNode } from "vue";
import { computed, defineComponent, h, ref, resolveComponent } from "vue";
import { usePageFrontmatter, withBase } from "vuepress/client";
import { RenderDefault } from "vuepress-shared/client";
import BreadCrumb from "vuepress-theme-hope/components/BreadCrumb.js";
import MarkdownContent from "vuepress-theme-hope/components/MarkdownContent.js";
import PageNav from "vuepress-theme-hope/components/PageNav.js";
import PageTitle from "vuepress-theme-hope/components/PageTitle.js";
import { useThemeLocaleData } from "vuepress-theme-hope/composables/index.js";
import PageMeta from "vuepress-theme-hope/modules/info/components/PageMeta.js";
import TOC from "vuepress-theme-hope/modules/info/components/TOC.js";
import { useDarkMode } from "vuepress-theme-hope/modules/outlook/composables/index.js";
import type { ThemeNormalPageFrontmatter } from "../../../node_modules/vuepress-theme-hope/lib/shared/index.js";
import "../../../node_modules/vuepress-theme-hope/lib/client/styles/normal-page.scss";
export default defineComponent({
name: "NormalPage",
slots: Object as SlotsType<{
top?: () => VNode[] | VNode | null;
bottom?: () => VNode[] | VNode | null;
contentBefore?: () => VNode[] | VNode | null;
contentAfter?: () => VNode[] | VNode | null;
tocBefore?: () => VNode[] | VNode | null;
tocAfter?: () => VNode[] | VNode | null;
}>,
setup(_props, { slots }) {
const frontmatter = usePageFrontmatter<ThemeNormalPageFrontmatter>();
const { isDarkMode } = useDarkMode();
const themeLocale = useThemeLocaleData();
const tocEnable = computed(
() => frontmatter.value.toc ?? themeLocale.value.toc ?? true
);
const headerLevels = computed<HeaderLevels>(() => [
2,
(frontmatter.value.headerDepth ?? themeLocale.value.headerDepth ?? 2) + 1,
]);
// 加了这些 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const canLoadComponent = ref(false);
async function checkCanLoadComponent() {
if (hasGlobalComponent("CommentService")) {
try {
const res = await fetch(
"https://waline.my.web/api/comment?type=count"
);
if (res.ok) canLoadComponent.value = true;
} catch (e) {
console.log(e); // 注释之后就没有输出了，但是还会卡 ==================================================
}
}
}
checkCanLoadComponent();
// 加了这些 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
return (): VNode =>
h(
"main",
{ id: "main-content", class: "vp-page" },
h(
hasGlobalComponent("LocalEncrypt")
? (resolveComponent("LocalEncrypt") as ComponentOptions)
: RenderDefault,
() => [
slots.top?.(),
frontmatter.value.cover
? h(
"div",
{ class: "page-cover" },
h("img", {
src: withBase(frontmatter.value.cover),
alt: "",
"no-view": "",
})
)
: null,
h(BreadCrumb),
h(PageTitle),
tocEnable.value
? h(
TOC,
{
options: {
levels: headerLevels.value,
ignore: [".vp-badge"],
},
},
{
before: slots.tocBefore,
after: slots.tocAfter,
}
)
: null,
h(
MarkdownContent,
{},
{
before: slots.contentBefore,
after: slots.contentAfter,
}
),
h(PageMeta),
h(PageNav),
canLoadComponent.value // 改了这里 =====================================================================
? h(resolveComponent("CommentService"), {
darkmode: isDarkMode.value,
})
: null,
slots.bottom?.(),
]
)
);
},
});输出： 我的 package.json： |
Beta Was this translation helpful? Give feedback.
Answered by
Mister-Hope
Apr 9, 2025
Replies: 1 comment 1 reply
-
|
learn some basics of ssg first |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
明白了，我应该把函数调用移动到生命周期钩子里 |
Beta Was this translation helpful? Give feedback.
Answer selected by
Alex6357
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
learn some basics of ssg first