一、打包项目
我们开发 vue 项目时，不管是使用 webpack，还是 vite，其实他们都是一个微型服务器，用于：支撑开发环境、运行代理服务器等。
执行打包：
npm run build
打包完的文件中不存在：.vue、.jsx、.less等文件，而是：html、css、js等，因为浏览器不认识.vue、.jsx、.less等文件。
image.png
打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。
二、部署方式
1.本地服务器部署
本次我们使用express框架在本地创建一个服务器
1.1 安装express
前提是电脑已经安装了node
新建一个文件夹，执行 npm init -y 命令，生成 package.json，再执行npm i express命令，下载express，成功之后如下图。
1.2 写server.js
const express = require('express');
// 创建 Express 应用
const app = express();
const PORT = 3000;
// 中间件
app.use(express.json()); // 解析 JSON 请求体
app.use(express.static('public')); // 提供静态文件服务
// 基本路由
app.get('/', (req, res) => {
res.send('欢迎使用 Express 服务器！');
});
// API 路由
app.get('/api/greeting', (req, res) => {
res.json({ message: '你好，来自 Express 服务器的问候！' });
});
app.get('/api/users', (req, res) => {
const users = [
{ id: 1, name: '张三', email: 'zhangsan@example.com' },
{ id: 2, name: '李四', email: 'lisi@example.com' },
{ id: 3, name: '王五', email: 'wangwu@example.com' }
];
res.json(users);
});
// 启动服务器
app.listen(PORT, () => {
console.log(`服务器运行在 http://localhost:${PORT}`);
});
