1Panel搭建部署vuepress（详细教程）

一. 介绍

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。

二. 搭建步骤

1. 首先在自己的服务器上安装1Panel 面板。具体流程可查看官方文档：安装文档

2. 进入管理后台，找到 系统--->文件。 然后打开home文件夹。点击创建新建一个文件夹,名字可以自定义，我这取的是vuepress

   

3. 创建好之后，进入文件夹，创建一个 package.json 文件。文件内容可按我的写。也可以自己更改。具体的含义可以查看vuepress的官方文档。

   {
     "name": "vuepress-starter",
     "private": true,
     "scripts": {
       "dev": "vuepress dev docs",
       "build": "vuepress build docs"
     },
     "devDependencies": {
       "@vuepress/bundler-vite": "next",
       "@vuepress/theme-default": "next",
       "sass": "^1.82.0",
       "vuepress": "next",
       "vue": "^3.5.13"
     }
   }
   ​

4. 然后再创建一个docs文件夹，在docs里面创建一个.vuepress文件夹，在.vuepress里面创建一个config.js的配置文件。

   

   

5. 在文件里面粘贴上下面的代码。具体意思可以查看官网

   import { viteBundler } from '@vuepress/bundler-vite'
   import { defaultTheme } from '@vuepress/theme-default'
   import { defineUserConfig } from 'vuepress'
   ​
   export default defineUserConfig({
     bundler: viteBundler(),
     theme: defaultTheme(),
   })

6. 然后目前的项目目录应该是这样的

   ├─ docs
   │  ├─ .vuepress
   │  │  └─ config.js
   │  └─ README.md  //自己可以创建一个文档
   └─ package.json

7. 然后进入网站，运行环境，找到 Node.js选项。创建运行环境

   

8. 创建运行环境，具体的可以参考我的配置。

   • 名称可以随便取一个，应用不用管

   • 源码目录选择刚才创建好的vuepress 文件夹就可以

   • 启动命令就会自动带出来选择dev那个，应用端口是8080

   • 外部映射端口根据自己的取一个只要与其他项目不冲突就行

   • 包管理器选择npm

   • 镜像源要是国内的服务器尽量选择国内的镜像源

   • 容器名称： vuepress

   

   

9. 然后点击确定，项目会自己加载拉取vuepress的信息，可以查看日志出来地址了，就运行成功了

   

三. 域名和反向代理的配置

1. 首先在1panel的网站里面创建一个反向代理网站。

   

2. 创建反向代理

   • 主域名：填写自己的域名。 要在域名服务器配置好dns解析

   • 代号不用管，默认就行

   • 代理地址：127.0.0.1:8086 后面的端口号就是上面创建运行环境时的外部映射端口号

   

3. 创建完成之后，就可以通过域名进行访问了。

四. 特殊问题及解决方案

1. 通过域名无法访问，比如访问提示需要添加到allowedHosts中

   

   这个是由于vite的限制，所以要进行配置一下

   找到config.js，在里面填上域名访问的配置，然后再重启服务器就可以了

   export default defineUserConfig({
     bundler: viteBundler({
       viteOptions: {
         server:{
           allowedHosts: true    //允许域名访问
         }
       },
       vuePluginOptions: {},
     }),
     theme: defaultTheme(),
     base: '/',
     title: 'VuePress Starter',
     description: 'VuePress Starter Project in Stackblitz',
   })

   具体的配置文档：https://vuepress.vuejs.org/zh/reference/bundler/vite.html

   vite的配置文档：https://cn.vite.dev/config/server-options.html