Netlify

特点

类似Vercel，支持自动部署、表单处理、Serverless函数。适用于静态网站、JAMStack项目。（速度更快访问体验更好）

同理进入Netlify，登录-->接入github-->选择项目-->配置Deploy Setting（构建命令、输出目录）

注意

需要设置（.env.production）

VITE_PUBLIC_PATH = /

（vite.config.js/vite.config.ts）

export default defineConfig(({mode}) => {
  return {
    // 开发或打包时用到的公共基础路径
    base: VITE_PUBLIC_PATH,
  }
})

部署后非首页路由刷新会报错找不到页面，原因：如果你的网站是一个单页应用（例如使用 Vue、React 等框架），Netlify 默认不会处理客户端路由（即非首页的路由）。当用户直接访问非首页路由时，Netlify 会尝试在服务器上查找对应的文件，但找不到，因此返回 404。

解决办法，在根目录新建文件netlify.toml

[build]
  publish = "dist"  # 替换为你的构建输出目录
  functions = "functions"  # 如果有 Netlify Functions，指定目录

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

即可解决非首页路由刷新404问题（如果vitepress和vue项目在同一个文件夹下，分开部署vitepress会受到影响，建议分库存放）

其他动态网站托管

Render：支持Node.js、Python、Ruby等，免费版含数据库。适用于小型动态网站（如Express、Django）。

Railway：支持Docker、多种语言，每月5美元免费额度。适用于全栈应用、API服务。

修改打包命令

修改打包命令如下

Deploys -> Build settings -> Build command

vitpress 打包用 npm run docs:build

vite 打包用 npm run build

或创建时设置完网站名字后直接设置Build command

Deploys -> Build settings -> Publish directory 设置如下（dist包文件位置）

.vitepress/dist

部署问题

vitepress页面部署问题

部署打包成功后访问页面page not find 404 是因为netlify不能确定页面路径

在根目录下添加netlify.toml文件

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

vue页面部署问题

vue页面部署后之后首页刷新正常，其他页面刷新会显示404，因为netlify只能指向index.html文件所以只有首页刷新正常

在根目录下添加netlify.toml文件

[build]
  publish = "dist"  # 替换为你的构建输出目录
  functions = "functions"  # 如果有 Netlify Functions，指定目录

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

访问问题

可能出现手机连wifi访问页面不加载，用流量好使，电脑插网线也好使的情况

更改手机wifi的IP设置为静态后DNS改为1.1.1.1或94.140.14.14后可以访问，但是网速很慢页面加载不全

开启vpn即可访问页面，但是需要有可用vpn