Stage four：VUE项目上线

1. 上线的概念

bash 复制代码

开发阶段（你的电脑）          上线后（全世界都能访问）
┌─────────────────┐         ┌─────────────────┐
│   你的电脑       │         │   服务器          │
│   localhost      │  ──►   │   公网域名        │
│   127.0.0.1      │         │   example.com    │
└─────────────────┘         └─────────────────┘
       只有你能访问                全世界都能访问

2. 上线前准备

bash 复制代码

┌─────────────────────────────────────────────┐
│  1. 代码完成    ──►   2. 测试通过    ──►   3. 打包构建   ──►   4. 部署上线   │
│     写代码              测试功能          npm run build         上传服务器    │
└─────────────────────────────────────────────┘

3. 详细步骤

打包项目

bash 复制代码

# 1. 进入项目目录
cd F:\...\...\...

# 2. 配置生产环境变量
# 创建 .env.production 文件
# VITE_API_URL=https://api.example.com

# 3. 打包
npm run build

# 打包完成后，会生成 dist/ 目录
# 这个目录就是你要上线的内容

①本地测试

bash 复制代码

npm run preview

②局域网访问

原理图

bash 复制代码

你的电脑          路由器          朋友的电脑
┌──────────┐     ┌──────────┐     ┌──────────┐
│ 192.168  │     │ 192.168  │     │ 192.168  │
│  .1.100  │────►│  .1.1    │◄────│  .1.200  │
└──────────┘     └──────────┘     └──────────┘
你的电脑和朋友在同一个WiFi

步骤

bash 复制代码

#查看你的IP地址，找到 IPv4 地址，比如 192.168.1.100
ipconfig

#使用支持局域网的服务（eg:Vite 预览）
npm run preview -- --host 0.0.0.0 --port 8080

#让朋友访问（若盆友打不开，可能是因为防火墙）
朋友在浏览器输入：
http://你的IP:8080

③内网穿透

原理图

bash 复制代码

家里/公司网络（内网）          公网服务器
┌─────────────┐              ┌─────────────┐
│  你的电脑    │   ◄──────►   │  穿透服务器  │
│  localhost   │              │  公网IP      │
└─────────────┘              └─────────────┘
                                │
                                ▼
                          ┌─────────────┐
                          │  朋友电脑    │
                          │  访问公网IP  │
                          └─────────────┘

内网穿透有很多工具可供使用，包括ngrok（国际推荐），cpolar（国内推荐），花生壳（国内老牌），localtunnel（免费简单），Cloudflare Tunnel（推荐）【这里不一一列举】

cpolar

第 1 步：下载安装官网：https://www.cpolar.com/download (下载 ZIP 压缩包)

第 2 步：注册登录

第 3 步：获取 Token

(以上信息请看文档 - cpolar 极点云官网)

第 4 步：启动本地项目 npm run preview

第 5 步：启动 cpolar cd C:\cpolar cpolar authtoken 你的Token cpolar http 启动端口号

bash 复制代码

# 成功会显示
Tunnel Status      online
Account            你的账号 (Plan: Free)
Web Interface      127.0.0.1:4042
Forwarding         http://...  .  ...  . ... . ... -> http://localhost:....
Forwarding         https://...  .  ...  . ... . ... -> http://localhost:....

# 这个就是你的公网地址！
# http://...  .  ...  . ... . ...
# https://...  .  ...  . ... . ...

第 6 步：分享给别人

第 7 步：关闭清理 Ctrl + C

花生壳

安装 https://hsk.oray.com

进入「内网穿透」
添加映射：

内网主机：localhost
内网端口：4173

生成公网域名

Cloudflare Tunnel

安装：访问 https://github.com/cloudflare/cloudflared/releases 下载 Windows 版本

bash 复制代码

# 启动本地服务
npm run preview

# 创建隧道
cloudflared tunnel --url http://localhost:4173

# 会显示公网地址

④云平台（GitHub，gitee）

Vercel 部署

步骤 1：将代码推送到 GitHub

bash 复制代码

# 如果还没有 git 仓库
git init
git add .
git commit -m "feat: 完成项目"

# 在 GitHub 创建仓库后
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -u origin main

步骤 2：登录 Vercel

访问 https://vercel.com 用 GitHub 账号登录

步骤 3：导入项目

点击「Add New...」→「Project」
选择你的 GitHub 仓库
配置保持默认
点击「Deploy」

步骤 4：等待部署完成

bash 复制代码

部署中...
构建成功！
你的网站已上线：https://your-project.vercel.app

⑤Tomcat 部署

下载 Tomcat 访问 https://tomcat.apache.org/download-10.cgi （下载 ZIP 版本）

检查Java版本，如果没安装，下载 JDK 17 https://www.oracle.com/java/technologies/downloads/

配置项目

bash 复制代码

// vite.config.js
export default {
  base: '/',  // 如果部署到根目录
  // 或者如果部署到子目录
  // base: '/my-app/',
}

打包

bash 复制代码

npm run build

复制到Tomcat

bash 复制代码

# 将 dist/ 目录的内容复制到
C:\apache-tomcat-10.0\webapps\ROOT\
# 或者
C:\apache-tomcat-10.0\webapps\my-app\

启动Tomcat

bash 复制代码

cd C:\apache-tomcat-10.0\bin
startup.bat

访问http://localhost:8080/

配置公网访问

如果要让别人访问，需要将 Tomcat 部署到公网服务器；或者使用内网穿透工具

Stage four：VUE项目上线

1. 上线的概念

2. 上线前准备

3. 详细步骤

打包项目

①本地测试

②局域网访问

③内网穿透

cpolar

花生壳

Cloudflare Tunnel

④云平台（GitHub，gitee）

Vercel 部署

⑤Tomcat 部署

⑥云服务器