目录
一、前期准备工作
因为是vue项目，编译和发布需要用到node.js，所以需要到node.js官网进行下载安装。这里需要注意的是node.js的版本，版本太低或太高，可能会导致编译和发布失败。博主这里安装的版本是v18.20.2。
Windos系统在CMD命令行输入以下命令查看本机安装的node.js版本（有安装过的情况）。
node -v
node.js官网下载地址：https://nodejs.org/zh-cn/download/package-manager
开发工具使用webstorm或者vscode都行，以下教程以webstorm为例。
二、博客web端发布流程
（一）源码拉取
源码gitee地址：https://gitee.com/linjiangxx/xiaolin-blog-vue-wed
（二）修改配置
源码拉取后，打开项目开发和生产环境配置文件，修改调用的后端接口服务地址(ps:后端服务不清楚怎么部署的，请查阅往期文章《从0开始搭建个人博客《第七期：后端服务部署教程》》)，如下图所示。
（三）安装依赖
修改完配置后，打开命令行终端，输入以下命令安装项目依赖包。
npm install
（四）本地启动
项目安装完依赖包后，如果要进行本地开发启动，需要输入以下命令。
npm run dev
启动完成后，打开浏览器访问打印出来的地址 http://localhost:5173/。ps：需要先启动后端服务，不然页面访问会报错。
（五）发布生产
如果要发布生产环境，则输入以下指令，对项目进行打包。打包完成后会在项目根目录下生成一个dist文件夹。
npm run build
首先，登录服务器，使用以下命令进入/www/xiaolin_blog （上一期部署后端服务的时候建的）目录下。
cd /www/xiaolin_blog/在该目录下新建一个目录 vue_blog_web 用于存放web端项目打包好的dist文件。
mkdir vue_blog_web
将项目打包好的dist整个文件夹复制并上传到新建的目录下。
（六）配置nginx
紧接着需要修改nginx配置文件，做域名请求映射配置。(ps:没有安装nginx的，请查阅往期文章《从0开始搭建个人博客《第六期：Nginx与SSL证书安装》》)。
输入以下命令打开nginx配置文件。
vim usr/local/nginx/conf/nginx.conf找到https配置，添加以下web端资源访问映射配置，编辑好后，按键盘ESC键，然后输入:wq 保存退出。
location / {
root /www/xiaolin_blog/vue_blog_web/dist;
index index.html index.htm;
#重写 URL，使得所有页面都能正确访问到 index.html
try_files $uri $uri/ /index.html;
}
修改nginx配置后，输入以下命令重启nginx。
./usr/local/nginx/sbin/nginx -s reload
（七）访问验证
最后，打开浏览器，在地址栏输入自己申请的和服务器绑定域名地址 https://你的域名，看是否正常访问到web端页面。
至此，博客web端发布上线完成。
三、博客admin端发布流程
（一）源码拉取
源码gitee地址：xiaolin-blog-vue-admin: 小林博客后台管理端前端工程
（二）修改配置
源码拉取后，打开项目开发和生产环境配置文件，修改调用的后端接口服务地址如下图所示。
（三）安装依赖
修改完配置后，打开命令行终端，输入以下命令安装项目依赖包。
pnpm install
（四）本地启动
项目安装完依赖包后，如果要进行本地开发启动，需要输入以下命令。
pnpm run dev
启动完成后，打开浏览器访问打印出来的地址 http://localhost:3000/。ps：需要先启动后端服务，不然页面访问会报错。
（五）发布生产
如果要发布生产环境，则输入以下指令，对项目进行打包。打包完成后会在项目根目录下生成一个dist文件夹。
pnpm run build
首先，登录服务器，使用以下命令进入/www/xiaolin_blog （上一期部署后端服务的时候建的）目录下。
cd /www/xiaolin_blog/在该目录下新建一个目录 vue_blog_admin 用于存放admin端项目打包好的dist文件。
mkdir vue_blog_admin
将项目打包好的dist整个文件夹复制并上传到新建的目录下。
（六）配置nginx
紧接着需要修改nginx配置文件，做域名请求映射配置。
输入以下命令打开nginx配置文件。
vim usr/local/nginx/conf/nginx.conf找到https配置，添加以下admin端资源访问映射配置，编辑好后，按键盘ESC键，然后输入:wq 保存退出。
location /admin {
alias /www/xiaolin_blog/vue_blog_admin/dist/;
index index.html;
#重写 URL，使得所有页面都能正确访问到 index.html
try_files $uri $uri/ /index.html;
}
修改nginx配置后，输入以下命令重启nginx。
./usr/local/nginx/sbin/nginx -s reload
（七）访问验证
最后，打开浏览器，在地址栏输入自己申请的和服务器绑定域名地址 https://你的域名/admin/，看是否正常访问到admin端页面。
至此，博客admin端发布上线完成。
四、结语
扫下方二维码关注或访问个人网站 https://www.xiaolin-code.com/，第一时间获取最新文章更新。
