Vite总结一个字快，相较webpack，下面搭设的项目基于Vue3.0+Vite+TS，一个文件路由，实现Markdown 中使用 Vue 组件，可以实现服务端渲染。
1 生成Vite项目
npm init @vitejs/app vite-static-site
2 安装配置vite-plugin-*
2.1 配置@vitejs/plugin-vue
// vite.config.tsimport { defineConfig } from "vite";import ViteVue from "@vitejs/plugin-vue";export default defineConfig({ plugins: [ ViteVue({ include: [/\.vue$/, /\.md$/], }), ],});
2.2 配置文件路由vite-plugin-pages
# 该插件还是需要vue-router提供支持的$ npm install vite-plugin-pages -D$ npm install vue-router@next
# 配置该插件需要用到的辅助库$ npm install @types/fs-extra @types/node fs-extra gray-matter -D
// vite.config.ts (以下为该插件的配置，不包括其他插件的配置)// ...import VitePages from "vite-plugin-pages";import { resolve } from "path";import fs from "fs-extra";import matter from "gray-matter";// plugins settingsexport default defineConfig({ plugins: [ //... VitePages({ extensions: ["vue", "md"], pagesDir: "pages", extendRoute(route) { const path = resolve(__dirname, route.component.slice(1)); const md = fs.readFileSync(path, "utf-8"); const { data } = matter(md); route.meta = Object.assign(route.meta || {}, { frontmatter: data }); return route; }, }), ],});
extensions：需要包含的文件类型，这里显然是 .vue 和 .md 文件。pagesDir：寻找文件的目录，这里选择了项目根目录下的 pages 目录。extendRoute：提供一个方法，对每个文件产生路由做一些加工，这里是对 route.meta的处理。matter：gray-matter[12] 的功能，可以获取相关文件中的 front-matter，并将其处理为一个对象。front-matter：markdown 文件顶部，由 --- 包裹的一块区域，就像：
修改main.ts
// src/main.tsimport App from "./App.vue";import { createApp } from "vue";import routes from "pages-generated"; // vite-plugin-pages 生成的路由信息import { createRouter, createWebHistory } from "vue-router";const app = createApp(App);app.use( createRouter({ history: createWebHistory(), routes, }));app.mount("#app");
修改App.vue
<!-- src/App.vue --><template> <router-view /></template>
在根目录下创建pages文件夹，新建各类.vue文件，npm run dev，就可以通过文件夹路由跳转页面
3 支持Markdown
3.1 安装配置vite-plugin-md
npm i vite-plugin-md -D
// vite.config.ts (以下为该插件的配置，不包括其他插件的配置)// ...import ViteMarkdown from "vite-plugin-md";// plugins settingsexport default defineConfig({ plugins: [ //... ViteMarkdown(), ],});
在pages下创建.md文件，重启系统就可以通过路由访问
3.2 markdown 文件中使用 Vue 组件
在src/components下新建.vue文件，并在.md中使用该组件，加入代码
+
安装配置vite-plugin-components
//安装
npm i vite-plugin-components
// vite.config.ts (以下为该插件的配置，不包括其他插件的配置)// ...import ViteComponents from "vite-plugin-components";// plugins settingsexport default defineConfig({ plugins: [ //... ViteComponents({ extensions: ["vue", "md"], customLoaderMatcher: (path) => path.endsWith(".md"), }), ],});
重启既可以实现markdown 文件中使用 Vue 组件
4.生成静态文件（SEO）
安装、配置静态工具vite-ssg
$ npm install vite-ssg -D# 使用 vite-ssg 需要的依赖$ npm install @vueuse/head -S$ npm install @vue/server-renderer -D
// src/main.tsimport App from "./App.vue";import routes from "pages-generated";import { ViteSSG } from "vite-ssg";// `export const createApp` is requiredexport const createApp = ViteSSG(App, { routes });
//package.json修改
"scripts": { "dev": "vite",- "build": "vue-tsc --noEmit && vite build",+ "build": "vite-ssg build", "serve": "vite preview" },
build后会生成许多html文件，方便搜索引擎的搜索，可以简单SEO配置了
