作为当代互联网农民工的你有没有过这样的经历？好不容易用VuePress搭建了个炫酷文档站，"npm run dev"跑得那叫一个欢快！可当老板说"发生产环境看看"时——你突然发现自己像极了过年被亲戚问工资的社恐青年？稳住！今天咱们就来聊聊这个让无数前端er从入门到放弃的哲学问题：如何优雅地把VuePress娶回服务器？

---

一、婚前准备：搞台正经服务器很重要

先给大家讲个真实案例：我司实习生小王曾试图用自家十年前的路由器当服务器（还振振有词说支持端口映射），结果访问速度堪比用摩斯代码传输《三体》全集...所以咱们首先要：

1️⃣ 选个靠谱云服务商（阿里云/腾讯云都行）

2️⃣ 装个正经操作系统（推荐Ubuntu 20.04 LTS）

3️⃣ 开启SSH远程登录（记得改默认22端口防爆破）

```bash

举个栗子：修改SSH端口

sudo vim /etc/ssh/sshd_config

找到Port 22改成Port 54321

sudo systemctl restart sshd

```

二、蜜月旅行：把项目打包进行李箱

这时候有些急性子同学要问了："直接git clone不香吗？"当然可以！但就像你不能把整个菜市场搬到婚礼现场一样——咱们需要精简打包：

1️⃣ 生产环境构建（魔法咒语npm run build）

2️⃣ 检查dist目录（这才是要给服务器的聘礼）

3️⃣ 压缩传输（建议用tar打包防散件）

本地操作

npm run build && tar -czvf docs.tar.gz ./docs/.vuepress/dist

远程传输指南

scp -P 54321 docs.tar.gz user@your_server_ip:/home/

这里有个专业冷知识：VuePress默认生成的是静态HTML文件（SPA），这意味着它比传统服务端渲染应用更轻量——就像带着压缩饼干去露营而不是扛着满汉全席！

三、洞房花烛：Web服务器的正确打开方式

现在你的代码已经躺在服务器上了！但别急着喝交杯酒——没有Web服务器的加持就像办婚礼忘了请司仪：

💡 三大护法任选其一：

- Nginx（推荐）：轻量灵活的老司机

- Apache：稳重可靠的大家长

- Caddy：自动HTTPS的黑科技

以Nginx为例的婚礼司仪配置：

```nginx

server {

listen 80;

server_name your_domain.com;

location / {

root /home/docs/dist;

你的嫁妆存放路径

index index.html;

try_files $uri $uri/ /index.html;

}

}

记得执行`nginx -s reload`让月老生效配置！此时访问http://your_domain.com应该能看到你的站点啦～

四、婚后生活：自动化才是幸福秘诀

你以为这就完了？Too young！手动部署就像每天手写情书——开始很浪漫后来准崩溃！咱们得搞点自动化：

🚀 CI/CD流水线方案：

1. GitHub Actions监听push事件

2. 自动构建并rsync同步到服务器

3. 发送钉钉通知给运维秃头组

```yaml

.github/workflows/deploy.yml参考模板

name: Deploy Docs

on:

push:

branches: [ main ]

jobs:

deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v2

- run: npm install && npm run build

- name: Rsync Deploy

uses: burnett01/rsync-deployments@5.2.3

with:

switches: -avz --delete

path: docs/.vuepress/dist/

remote_path: /home/docs/

remote_host: your_server_ip

remote_user: user

remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

这波操作相当于给婚姻装了自动驾驶系统——从此你和服务器的关系就像泡在蜜罐里的维尼熊！

五、七年之痒：常见翻车现场急救指南

就算再恩爱的夫妻也会吵架不是？来看看这些经典翻车姿势：

🚑 Case1: Nginx报403 Forbidden

👉可能是文件权限问题！试试`chmod -R 755 /home/docs`

🚑 Case2: CSS/JS加载404

👉检查nginx配置中的root路径是否正确指向dist目录

🚑 Case3: 路由跳转空白页

👉确保启用了history模式支持（try_files那行不能少）

🚑 Case4: HTTPS小绿锁消失

👉Caddy自动帮你搞定或用Certbot申请免费证书：

sudo certbot --nginx -d your_domain.com

六、金婚秘籍：进阶玩法拓展包

想过上没羞没臊的幸福生活？这些增值服务了解一下：

🎁 Docker化部署：

```dockerfile

FROM node:14-alpine AS builder

WORKDIR /app

COPY . .

RUN npm install && npm run build

FROM nginx:alpine

COPY --from=builder /app/docs/.vuepress/dist /usr/share/nginx/html

EXPOSE 80

🎁 CDN加速：

- 把静态资源扔到阿里云OSS+CDN

- VuePress支持publicPath配置指向CDN地址

🎁 服务端渲染增强版：

- Nuxt.js/VitePress等替代方案

- SSR提升SEO效果

📌终极总结

记住三点婚姻保鲜秘诀：

1. Keep it Simple（别过度设计）

2. Keep it Stable（做好错误监控）

3. Keep it Safe（定期备份+HTTPS）

现在你已经掌握了让VuePress与服务器白头偕老的奥义！赶紧去给你的文档安个家吧～如果还有疑问欢迎评论区留言互动！（小声说点赞过千就出续集《如何用K8s给VuePress找个小三》）

TAG:vuepress部署在服务器上,vue 服务器部署,vue部署到服务器 接口调用不了,vuepress 部署,express部署vue项目