時間：2023-10-12 08:18:01 | 來源：網(wǎng)站運營
時間：2023-10-12 08:18:01 來源：網(wǎng)站運營
用 Vite 構(gòu)建靜態(tài)網(wǎng)站：本文發(fā)布在我的個人網(wǎng)站 archergu.me 上，請勿隨意轉(zhuǎn)載！前置知識：前端工程化 (Nodejs, npm...)，Vue.js (最好 >= 3.0)，TypeScript，基本的 markdown 編寫能力。
在線咨詢
$ npm init @vitejs/app vite-static-site根據(jù)命令行的提示，我們選擇 Vue 框架，用 TypeScript 開發(fā)。然后進入項目目錄，安裝依賴。src目錄下，入口同樣是main.ts文件。而框架的配置文件則由vue.config.js換成了vite.config.ts。此時這只是一個簡單的 Vue 項目（只是把構(gòu)建器從 Webpack 換成了 Vite），距離我們的目標(biāo)還相去甚遠。接下來我們需要安裝各種 vite-plugin-*，即 Vite 的插件，插件將在vite.config.ts中配置。@vitejs/plugin-vue 配置好，該插件為 Vite 提供了 Vue3 的 SFC 支持（由于剛才生成項目的時候選擇了 Vue 作為開發(fā)框架，所以該插件無需手動安裝）。// vite.config.tsimport { defineConfig } from "vite";import ViteVue from "@vitejs/plugin-vue";export default defineConfig({ plugins: [ ViteVue({ include: [//.vue$/, //.md$/], }), ],});.vue頁面就可以自動生成路由，而訪問者只要訪問具體的路由，即可訪問對應(yīng)文件包含的內(nèi)容了，這樣做我們就不用像傳統(tǒng) Vue 項目開發(fā)那樣在 vue-router 中配置專門的路由映射。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-plugin-pages 的配置：// 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：提供一個方法，對每個文件產(chǎn)生路由做一些加工，這里是對 route.meta 的處理。matter：gray-matter 的功能，可以獲取相關(guān)文件中的 front-matter，并將其處理為一個對象。front-matter：markdown 文件頂部，由 --- 包裹的一塊區(qū)域，就像：---title: Hellodate: 2021-06-02---總結(jié)就是，vite-plugin-pages 會自動把 pages 目錄中的 .vue 和 .md 文件生成對應(yīng)的路由，并且我們可以利用 markdown 的 front-matter 來為路由提供一些額外信息。router，并讓 app use 。修改 src/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");Note: 在 TS 中，直接從 `pages-generated` 導(dǎo)入會引起類型錯誤，需要在 `tsconfig.json` 的 `compilerOptions.types` 數(shù)組中加入 `vite-plugin-pages/client` 來加載對應(yīng)的聲明文件。
App.vue 文件也需要進行修改，我們可以刪除自動生成的所有代碼，然后添加一個簡單:<!-- src/App.vue --><template> <router-view /></template>還缺少一些頁面，我們在項目根目錄下創(chuàng)建 pages 文件夾，并在里面創(chuàng)建一個 index.vue 文件作為 homepage，再創(chuàng)建一個 foo.vue 作為測試頁面：<!-- pages/index.vue --><template> <div>Hello, Vite</div></template><!-- pages/foo.vue --><template> <div>foo</div></template>上面的這些操作其實就和我們構(gòu)建一個常規(guī)的 Vue 項目一樣?，F(xiàn)在我們可以運行一下網(wǎng)站：$ npm run dev你可以在瀏覽器中看到我們設(shè)置的首頁。在地址欄中添加 /foo 可以跳轉(zhuǎn)到 foo 頁面。pages 目錄下創(chuàng)建一個 .md 文件的頁面，但是卻發(fā)現(xiàn)盡管路由生成了，但是頁面卻無法顯示，因為目前這個靜態(tài)網(wǎng)站生成器還缺少 markdown 的支持。vite-plugin-md 為 Vite 提供了將 markdown 當(dāng)作 Vue 組件使用的功能，也可以在 markdown 中使用 Vue 組件。安裝該插件：$ npm i vite-plugin-md -D然后配置一下:// vite.config.ts (以下為該插件的配置，不包括其他插件的配置)// ...import ViteMarkdown from "vite-plugin-md";// plugins settingsexport default defineConfig({ plugins: [ //... ViteMarkdown(), ],});現(xiàn)在我們就可以在 pages 目錄下創(chuàng)建一個 bar.md 來嘗試一下了：<!-- pages/bar.md --># Hi, MarkdownThis is a markdown page.重啟項目后，在瀏覽器地址欄里添加 /bar，就可以看到這個 markdown 頁面了。src/components 下建立一個 Vue 組件，比如叫 MyComponent.vue：<!-- src/components/MyComponent.vue --><template> <div>This is a Vue component.</div></template>然后我們把該組件加入到 pages/bar.md 中:<!-- pages/bar.md --># Hi, MarkdownThis is a markdown page.+ <MyComponent />重啟項目，什么都沒有發(fā)生 。這是因為 markdown 中我們沒法像 js/ts 那樣將組件 import 進來，所以除非這個組件被全局注冊，否則無法直接使用。vite-plugin-components 插件可以幫我們解決問題，這個插件提供了組件自動導(dǎo)入功能（ vite-plugin-md 實際上是對 markdown 進行了 html 轉(zhuǎn)換處理，所以在 markdown 中使用了組件，也可以獲得 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"), }), ],});重啟項目，此時 MyComponent 組件已經(jīng)正確的顯示了！build 項目時將頁面打包成一個個的靜態(tài)頁面。$ npm install vite-ssg -D# 使用 vite-ssg 需要的依賴$ npm install @vueuse/head -S$ npm install @vue/server-renderer -D接下來，我們修改一下項目的入口文件 main.ts：// 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："scripts": { "dev": "vite",- "build": "vue-tsc --noEmit && vite build",+ "build": "vite-ssg build", "serve": "vite preview" },用 dev 模式重啟一下項目，應(yīng)該沒有啥問題。然后我們執(zhí)行下 build：$ npm run build項目自動進行打包，輸出目錄默認是根目錄下的 dist 文件夾。你會發(fā)現(xiàn)，這個打包的結(jié)果和常規(guī)的 vue-cli 或者 Vite 項目打包的結(jié)果不同，它將頁面都轉(zhuǎn)換成了的 .html 靜態(tài)頁面文件。這樣我們在部署網(wǎng)站時，搜索引擎將盡可能的收集我們創(chuàng)作的內(nèi)容。vite-static-site 找到本文所記錄的源碼。antfu.me 和 vitesse。實際上前文提到的大部分插件和工具都是 Anthony Fu 創(chuàng)造并維護的，感謝他為我們帶來了這些有趣的項目。 關(guān)鍵詞：靜態(tài)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
