vuepress文档部署到linux服务器

思路分析

• 本地打包vuepress文件成静态资源文件
• 上传到服务器
• 修改nginx配置文件

本地打包

在docs目录下打开cmd,输入打包的命令

pnpm docs:build

打包命令执行成功后会在.vuepress目录下面生成一个dist文件,我们需要上传该文件到服务器

注意

• 如果我们部署的路径是在在我们网站的根目录https://foo.github.io下面,无需修改vuepress配置文件config.ts里面的base
• 如果你想让你的网站部署到一个子路径下，你将需要设置它。它的值应当总是以斜杠开始，并以斜杠结束。举例来说，如果你想将你的网站部署到 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/"。同时nginx配置文件的代理路径也要设置为/bar/
• base配置方式的官方文档地址: https://v2.vuepress.vuejs.org/zh/reference/config.html

上传dist文件到服务器

• 这一步可以使用工具上传到服务器, 也可以使用sftp命令

修改nginx配置文件

# https vuepress前端访问地址
location /vuepress/ {
        alias   /usr/share/nginx/html/vueprss/dist/;
        try_files $uri $uri/ /_book/index.html;
        index  index.html index.htm;
}

注意

• 此处我的nginx代理配置的路径是/vuepress/那么上面的base就应该配置成/vuepress/
• 需要把上面上传的dist文件放到/usr/share/nginx/html/vueprss/并解压缩
• 重启nginx即可访问我们的vuepress文档

访问路径

ip + /vuepress/ 或者域名 + /vuepress/ 我这里测试的地址是 https://www.hellocoders.cn/vuepress/