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/