VuePress-theme-hope 服务器项目部署

HSXISAWD2026/3/20大约 4 分钟

VuePress-theme-hope 服务器项目部署

一、概述

VuePress-theme-hope 部署方式有很多种，详细可以查看：VuePress 官方文档

大部分都是代码托管的平台搭建部署项目，VuePress 打包的项目都是静态页面，所以用使用官方推荐的方法其实完全没有什么问题，省去额外的开销，但是唯一缺点就是可能网速会慢，但是对于我们只想简单搭建一个文档博客来说，已经够用。

而我主要是因为有空闲服务器和公网，所以决定使用服务器部署的方式进行搭建

二、打包项目

打包项目很简单，直接使用 VuePress 提供的命令打包: npm run docs:build 。打包完的文件会生成在 /src/.vuepress/dist 目录下，推荐修改一下配置，让打包路径放在和 src 同级目录下，方便后续部署。

在你的 .vuepress/config.js 或 .vuepress/config.ts 文件中，添加或修改 dest 配置项：

新建一个 docs 文件夹，后续放置我们的部署文件，还有打包文件

// .vuepress/config.js
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  // 设置打包输出目录为项目根目录下的 dist 文件夹
  dest: "./docs/dist",

  theme: hopeTheme({
    // 你的主题配置
  }),

  // 其他配置...
});

三、部署到服务器

本次部署，我使用 docker 和 nginx 来进行部署，使用这个部署的好处主要有：

环境隔离与一致性：因为我的服务器可能不止部署这个项目。使用容器可以完美解决依赖冲突问题，每个服务都有自己的独立环境。
简化部署流程：一旦容器镜像构建好，部署就变成了简单的 docker run 命令。这比在服务器上手动配置用户、安装版本管理工具（如 nvm）、配置环境变量要简单可靠得多。
提高访问性能：nginx 可以更好的处理静态资源，提高服务访问的性能。

注意

本文不介绍 Docker 和 nginx 的安装或者相关知识，可以查询我的其他相关文章。

1.编辑配置文件

docker-compose.yml

services:
  docs:
    image: nginx:alpine
    container_name: MyBlogDocs
    ports:
      - "8000:80" # 主机端口:容器端口
    volumes:
      - ./dist:/usr/share/docs # 挂项目文件
      - ./nginx.conf:/etc/nginx/conf.d/default.conf # 挂载Nginx配置
    restart: unless-stopped # 自动重启
    environment:
      - TZ=Asia/Shanghai # 设置时区
    networks:
      - docs-network

networks:
  docs-network:
    driver: bridge

volumes:
  logs: # 外部日志卷
    driver: local

nginx.conf

server {
    listen 80;
    server_name localhost;
    root /usr/share/docs;
    index index.html;

    # 禁用显示目录列表
    autoindex off;

    # Gzip 压缩配置
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml+rss
        application/atom+xml;

    # 主请求处理 - 针对 VuePress SPA 路由优化
    location / {
        try_files $uri $uri/ @spa;
    }

    # SPA 回退处理
    location @spa {
        rewrite ^ /index.html last;
    }

    # 静态资源缓存优化
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|avif)$ {
        expires 1y;
        add_header Cache-Control "public, immutable, max-age=31536000";
        add_header Access-Control-Allow-Origin "*";
        try_files $uri =404;
    }

    # 字体文件缓存
    location ~* \.(woff2?|eot|ttf|otf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }

    # 保护隐藏文件
    location ~ /\. {
        deny all;
        return 404;
    }

    # favicon 和 robots 特殊处理
    location = /favicon.ico {
        access_log off;
        log_not_found off;
        expires 1y;
    }

    location = /robots.txt {
        access_log off;
        log_not_found off;
    }

    # 避免处理 .map 文件
    location ~* \.map$ {
        deny all;
        return 404;
    }
}

2.拷贝项目文件到服务器中

本地创建 docs 文件夹:将docker-compose.yml、nginx.conf、dist 文件复制到该目录下`
远程服务器创建目录： /www/docs
给目录增加权限：sudo chmod -R 777 /www/docs
上传项目:使用文件传输工具或者使用 scp 命令: scp -r ./docs/* 用户名@远程IP:/www/docs 将 docs 文件夹中的内容上传到服务器的 /www/docs 目录下

3. 启动服务

启动服务：在 /www/docs 目录运行 sudo docker compose up -d
终端命令
查看服务状态：在 /www/docs 目录运行 sudo docker compose ps
终端命令
访问服务：在浏览器中打开 http://你的服务器IP:80

4. 更新服务

由于 vuepreess-theme-hope 是静态网页, 所有我们只需要把新项目覆盖掉旧项目，甚至容器都不需要重启。

直接使用 文件传输工具 或者 scp -r ./dist/* 用户名@远程IP:/www/docs/dist/ 命令将项目推送到服务器即可。