published: false
description: 避免忘记..持续更新…目前：vercel

在Vercel上部署

部署方式有两种，一种是本地构建后解除.gitignore的…./dist限制，上传到Vercel上在设置中选择

image-20241018014419698

\docs\.vitepress\dist即可

第二种就是构建的方式部署，简单快捷自动构建

只需在package.json文件中的scripts加入一行vercel的build指令"vercel-build": "chmod +x ./node_modules/.bin/vitepress && npm run docs:build"即可。

此时可以在根目录下建立一个vercel.json来配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "builds": [
        {
            "src": "package.json",
            "use": "@vercel/static-build",
            "config": {
                "distDir": "docs/.vitepress/dist"
            }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/docs/.vitepress/dist/$1"
        }
    ]
}

可以进行路由跳转去除.html，但是有一个弊端，就是刷新页面的时候会出现404

img

此时可以在.vitepress/config配置文件中加入

1
2
3
defineConfig({
   cleanUrls:true,  
})

修改根目录下vercel.json`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
    "builds": [
        {
            "src": "package.json",
            "use": "@vercel/static-build",
            "config": {
                "distDir": "docs/.vitepress/dist"
            }
        }
    ],

    
    "cleanUrls": true ,
    
    "headers": [
        {
        "source": "/assets/(.*)",
        "headers": [
            {
            "key": "Cache-Control",
            "value": "max-age=31536000, immutable"
            }
        ]
        }
    ]
}

可以此时刷新界面就不会出现404了。

headrers在这里的意义是添加缓存，路径为”/assets/(.*)”所有文件，加快访问速度，时间为最高一年。