本地部署静态网站生成工具 Vuepress 并实现外部访问

Vuepress 是一款以 Markdown 为中心，基于 Vue 和 Router 驱动的单页面应用。提供了现代化响应式主题，适用于各种文档，帮助开发者快速搭建具有良好用户体验的静态网站。本文将详细介绍如何在本地安装 Vuepress 以及结合路由侠内网穿透实现外网访问 Vuepress 。

第一步，本地部署 Vuepress

1，安装 vuepress 前需要提前安装好 Node.js （版本最好大于20+）。点此进入 Node.js 官网

2，创建并进入新项目。

复制代码

mkdir vuepress-starter

复制代码

cd vuepress-starter

3，初始化项目。

复制代码

git init

复制代码

npm init

4，安装 Vurepress 。

复制代码

npm install -D vuepress@next

5，安装工具和主题。

复制代码

npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next

6，创建 docs 文件夹并在 docs 目录下创建 .vuepress 文件。

复制代码

mkdir docs

复制代码

mkdir docs/.vuepress

7，创建 VuePress 配置文件 docs/.vuepress/config.js。

复制代码

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  bundler: viteBundler(),
  theme: defaultTheme(),
})

8，在 .vuepress 同级目录下创建 README.md 为第一篇文档。在文档内输入 #hello world。

9，创建 .gitignore 文件，并添加 .temp 、.cache、dist 目录用于存放临时文件、缓存文件和构建输出文件。

10，开始使用服务器。

在项目目录下的 package.json 中添加一些 scripts。

复制代码

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

启动服务器。

复制代码

npm run docs:dev

11，浏览器输入 http://localhost:8080，即可访问 Vuepress 界面。

第二步，外网访问 Vuepress

本机安装路由侠。点此下载

1，下载安装完成后，打开路由侠界面，点击【内网映射】。

;

2，点击【添加映射】。

3，选择【原生端口】。

4，在内网端口里填写 Vuepress 的端口号 8080 后点击【创建】按钮，如下图。

5，创建好后，就可以看到一条映射的公网地址，鼠标右键点击【复制地址】。

在 config.js 文件中 export default defineUserConfig 的内容更改为如下允许外部访问。

复制代码

bundler: viteBundler({
    viteOptions: {
      server: {
        host: '0.0.0.0',
        allowedHosts: ['lyxlike.f1.luyouxia.net']
      }
    },
   
  }),
  theme: defaultTheme({
  }),
})

保存后重新启动开发服务器。

6，在外网的浏览器的地址栏输入复制的外网地址就可以访问本地部署的 Vuepress 界面了。