用 Vite 构建静态网站，还原 Vitepress 的能力

后置科学知识：后端产业化 (Nodejs, npm…)，Vue.js (最合适 >= 3.0)，TypeScript，基本上的 markdown 撰写潜能。

译者：顾不得 

https://zhuanlan.zhihu.com/p/377593594

切勿随便转发

他们须要做甚么？

他们的最终目标是构筑两个动态中文网站，但或许并非有种单纯用 html 撰写的网页，他们的中文网站在顺利完成构筑后，先期只须要在 markdown 中展天分，接着透过智能化的业务流程将 markdown 转化成动态的 html 网页，并为之聚合适当的路由器。因此这首诗事实上即将如是说的是怎样构筑两个智能化的动态中文网站聚合器，就像VuePress[1],Hexo[2] 那般。

最终目标明晰后，他们就须要列呵呵核心控制技术：

前面我就对下面的控制技术点展开表明，在此操作过程中也会加插许多控制技术细节文本。

聚合两个 Vite 工程项目

Vite 是 2020 年 Evan You[6] 为他们增添的两个新一代后端开发与构筑辅助工具。这儿不能详尽的如是说 Vite ，钟爱的好友能写作其 非官方文件格式[7]。我对 Vite 的觉得，是两个字 —— 快 ⚡，吗是十分快呐 。

生成两个 Vite 工程项目（ Node.js 版 >= 12.0.0）:

$ npm init @vitejs/app vite-static-site

依照配置文件的提示信息，他们优先选择 Vue 架构，用 TypeScript 开发。接着进入工程项目目录，安装依赖。

就像你用 vue-cli[8] 构筑的 Vue 工程项目一样，工程项目源码都被放置在src目录下，入口同样是main.ts文件。而架构的配置文件则由vue.config.js换成了vite.config.ts。此时这只是两个简单的 Vue 工程项目（只是把构筑器从 Webpack 换成了 Vite），距离他们的最终目标还相去甚远。接下来他们须要安装各种vite-plugin-*[9]，即 Vite 的插件，插件将在vite.config.ts中配置。

因为这是两个如前所述 Vite 的 Vue 工程项目，因此他们先把 @vitejs/plugin-vue[10] 配置好，该插件为 Vite 提供了 Vue3 的 SFC 全力支持（由于刚才聚合工程项目的时候优先选择了 Vue 作为开发架构，因此该插件无需手动安装）。

;

;

 defineConfig({

  plugins: [

ViteVue({

],

    }),

  ],

});

文件路由器

甚么是文件路由器？确切的说应该是如前所述磁盘的路由器（file system based routing）。因为中文网站构筑后，通常情况下他们只须要写写 markdown，或者.vue网页就能自动聚合路由器，而访问者只要访问具体的路由器，即可访问对应文件包含的文本了，这样做他们就不用像传统 Vue 工程项目开发那般在 vue-router 中配置专门的路由器映射。

vite-plugin-pages[11] 插件为他们提供了这样的功能，安装该插件:

$ npm install vite-plugin-pages -D

$ npm install vue-router@next

$ npm install @types/fs-extra @types/node fs-extra gray-matter -D

接下来他们来顺利完成 vite-plugin-pages 的配置：

;

;

;

;

 defineConfig({

  plugins: [

    VitePages({

],

,

      extendRoute(route) {

));

);

 { data } = matter(md);

.assign(route.meta || {}, { frontmatter: data });

 route;

      },

    }),

  ],

});

一块区域，就像：—

title: Hello

date: 2021-06-02

—

总结是，vite-plugin-pages 会自动把 pages 目录中的 .vue 和 .md 文件聚合对应的路由，并且他们能利用 markdown 的 front-matter 来为路由器提供许多额外信息。

接着他们来修改呵呵工程项目中的许多文件，让它们的功能和结构符合当前的插件配置。

为了让路由器在 app 中生效，他们须要创建两个router，并让 app use 。修改 src/main.ts：

;

;

;

 app = createApp(App);

app.use(

  createRouter({

history: createWebHistory(),

    routes,

  })

);

);

Note: 在 TS 中，直接从 `pages-generated` 导入会引起类型错误，须要在 `tsconfig.json` 的 `compilerOptions.types` 数组中加入 `vite-plugin-pages/client` 来加载对应的声明文件。

App.vue 文件也须要展开修改，他们能删除自动聚合的所有代码，接着添加两个简单:

还缺少许多网页，他们在工程项目根目录下创建 pages 文件夹，并在里面创建两个 index.vue 文件作为 homepage，再创建两个 foo.vue 作为测试网页：

下面的这些操作其实就和他们构筑两个常规的 Vue 工程项目一样。现在他们能运行呵呵中文网站：

$ npm run dev

你能在浏览器中看到他们设置的首页。在地址栏中添加 /foo 能跳转到 foo 网页。

全力支持 Markdown

顺利完成下面的 vite-plugin-pages 插件配置后，也许你尝试在 pages 目录下创建两个 .md 文件的网页，但却发现尽管路由器聚合了，但网页却无法显示，因为目前这个动态中文网站聚合器还缺少 markdown 的全力支持。

vite-plugin-md[13] 为 Vite 提供了将 markdown 当作 Vue 模块采用的功能，也能在 markdown 中采用 Vue 模块。安装该插件：

$ npm i vite-plugin-md -D

接着配置呵呵:

;

 defineConfig({

  plugins: [

    ViteMarkdown(),

  ],

});

现在他们就能在 pages 目录下创建两个 bar.md 来尝试呵呵了：

# Hi, Markdown

This is a markdown page.

重启工程项目后，在浏览器地址栏里添加 /bar，就能看到这个 markdown 网页了。

并非说还能在 markdown 文件中采用 Vue 模块吗？那么现在，在src/components 下建立两个 Vue 模块，比如叫 MyComponent.vue：

接着他们把该模块加入到 pages/bar.md 中:

# Hi, Markdown

This is a markdown page.

重启工程项目，甚么都没有发生 。这是因为 markdown 中他们没法像 js/ts 那般将模块 import 进来，因此除非这个模块被全局注册，否则无法直接采用。

这儿又有两个 vite-plugin-components[14] 插件能帮他们解决问题，这个插件提供了模块自动导入功能（ vite-plugin-md 事实上是对 markdown 展开了 html 转换处理，因此在 markdown 中采用了模块，也能获得 vite-plugin-components 的全力支持）。配置呵呵插件：

;

 defineConfig({

  plugins: [

    ViteComponents({

],

),

    }),

  ],

});

重启工程项目，此时 MyComponent 模块已经正确的显示了！

动态页面聚合

顺利完成下面的 Vite 插件配置后其实已经是两个具有基本上功能的中文网站了，你完全能按照常规的开发模式来构筑自己的网页。但这儿他们还须要顺利完成动态网页的聚合，这样当你创作文本并发布后，搜索引擎也许会记录到许多信息（SEO 优化）。

Anthony Fu[15] 大佬为他们提供了两个动态网页聚合器（SSG，server-side generation）—— vite-ssg[16]。采用这个辅助工具，他们可以在 build 工程项目时将网页打包成两个个的动态网页。

安装 vite-ssg：

$ npm install vite-ssg -D

$ npm install @vueuse/head -S

$ npm install @vue/server-renderer -D

接下来，他们修改呵呵工程项目的入口文件 main.ts：

;

;

;

 createApp = ViteSSG(App, { routes });

接着他们也须要修改呵呵 package.json 中的 scripts：

“scripts”: {

    “dev”: “vite”,

    “serve”: “vite preview”

  },

用 dev 模式重启呵呵工程项目，应该没有啥问题。接着他们执行下 build：

$ npm run build

工程项目自动展开打包，输出目录默认是根目录下的 dist 文件夹。你会发现，这个打包的结果和常规的 vue-cli 或者 Vite 工程项目打包的结果不同，它将网页都转化成了的 .html 动态网页文件。这样他们在部署中文网站时，搜索引擎将尽可能的收集他们创作的文本。

最后说的话

这是两个基础的 Vite 动态网页聚合器，他们能利用它来构筑各种有趣的工程项目，你能在 vite-static-site[17] 找到本文所记录的源码。

它的整体思路都来自于Anthony Fu[18] 的 antfu.me[19]和vitesse[20]。事实上前文提到的大部分插件和辅助工具都是 Anthony Fu 创造并维护的，感谢他为他们增添了这些有趣的工程项目。

如果你喜欢该文章，能关注我的 [个人中文网站[21]] 或者 在 GitHub[22] 上follow我，十分感谢~

感谢

欢迎长按图片加 ssh 为好友，我会第一时间和你分享后端行业趋势，学习途径等等。2021 陪你一起度过！

参考资料