vitepress 配合 express.js 报错解决 Hydration completed but contains mismatches

vitepress 编译后是SSG静态文件, 由 express.js 提供后端服务

#静态站点生成器 (SSG)
npm i --save-dev vitepress   
npm i express 

文件结构如下

  • .vitepress/config.mjs 是配置文件. 能否打包成功,取决于它的配置
  • config 中有一个配置项 base 这个设置成英文,否则必然报错
  • 如下,base设置后,打包后所有路径前缀都是 /lwleen-file
    文件结构
{
  lang:"zh-CN",
  
  title: "Li文件浏览器",
  description: "Li文件浏览器",
  base:"/lwleen-file",         //这个不能是中文,否则报错   Hydration completed but contains mismatches
  srcDir:"src",
  // outDir:"dist",
  // assetsDir:"assets",
  cacheDir:"/dev/shm/vite/vitepress",
  // router:{prefetchLinks:true},  
  lastUpdated:true, 
  useWebFonts:true,
  // mpa:true,  
  
  themeConfig: {
    logo: '/app.svg',
    nav: [
      { text: '主页', link: '/' },
      { text: '留言板', link: 留言板网址 }
    ],
    sidebar: [
      {
        text: '介绍',
        items: [
          { text: '使用说明', link: '/使用说明' },
          { text: '资源引用', link: '/资源引用' },
        ]
      }
    ],
  
    search: {
      provider: 'local',
    },
    footer: {
      message: '基于 GPL-3.0 许可发布',
      copyright: '版权所有 © 2019-2024 一切时空过去未来',
    },
    docFooter: {
      prev: '上一页',
      next: '下一页',
    },
    socialLinks: [
      { icon: 'github', link: 'https://gitee.com/lwleen/lwleen-file' }
    ],
  • __打包.mjs
import {  build as vite_build } from 'vitepress'
vite_build(".")

express.js 服务端

  • 网页发来请求, 返回文件即可
  • 如上,vitepress 配置 base,打包后所有路径前缀都是 /lwleen-file
  • 网页访问 : http://0.0.0.0:12346/lwleen-file 打开主页
import express from'express'

const app = express()
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.get("*",(req,res)=>{  
   let 相对路径 = decodeURI(decodeURI(req.url))
   if(/^\/lwleen-file/g.test(相对路径)){                     // console.log(相对路径)
       let 路径 = path.join( path.dirname(网页路径.软件vitepress) , 相对路径.replace(/^\/lwleen-file/g,"/") )
       res.sendFile(路径)
   }
   // else res.sendFile(path.join( path.dirname(网页路径.itTools网页) , 相对路径 ))
})
app.post("*",(req,res)=>{
   let 相对路径 = decodeURI(decodeURI(req.url))
   console.log("post  ",相对路径)
})
let express服务器 = app.listen(12346,"0.0.0.0", () => { console.log('🍍🍍🍍新建https服务器: https://0.0.0.0:12346') })

源码 linux 工具箱
https://gitee.com/lwleen/lwleen-file
在这里插入图片描述

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值