如何将Vue项目部署到服务器上_确保你的电脑上装了_如何将Vue项目部署到Express服务器上
作者：编程小白 |
发布时间：2025-07-07 |
如何将Vue项目部署到Express服务器上？
要部署一个Vue项目到Express服务器上，你需要完成几个基本的步骤。下面我会用更口语化的方式来解释每个步骤。
---
一、构建Vue项目
确保你的电脑上装了Node.js和npm（或者yarn）。然后，使用Vue CLI来创建并构建你的Vue应用。
1. 安装Vue CLI：
```bash
npm install -g @vue/cli
```
2. 创建新项目：
```bash
vue create my-vue-project
```
3. 进入项目目录：
```bash
cd my-vue-project
```
4. 构建项目：
```bash
npm run build
```
这会生成所有的静态文件，这些文件就是你需要部署到服务器上的。
---
二、配置Express服务器
接下来，我们要设置一个Express服务器来托管这些静态文件。
1. 创建Express项目：
如果还没有Express项目，先创建一个：
```bash
npm init -y
npm install express
```
2. 创建主服务器文件：
在项目根目录下创建一个名为 `server.js` 的文件，并添加以下代码：
```javascript
const express = require('express');
const path = require('path');
const app = express();
// Serve static files from the React app
app.use(express.static(path.join(__dirname, 'public')));
// The "catchall" handler: for any request that doesn't
// match one above, send back React's index.html file.
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
```
---
三、部署静态文件
将Vue项目的构建输出复制到Express项目中。
1. 复制构建文件：
```bash
cp -r my-vue-project/dist public
```
2. 更新Express项目结构：
确保Express项目结构如下：
```
express-project/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...其他文件...
├── server.js
└── package.json
```
3. 启动服务器：
```bash
node server.js
```
现在，你可以在浏览器中访问 应该能看到你的Vue应用程序。
---
四、部署到生产环境
在生产环境中，你可以使用Heroku、Vercel或者自己的VPS服务器来部署。
使用Heroku部署的步骤如下：
1. 安装Heroku CLI：
```bash
npm install -g heroku-cli
```
2. 登录Heroku：
```bash
heroku login
```
3. 创建Heroku应用：
```bash
heroku create my-vue-app
```
4. 部署代码：
```bash
git init
heroku git:remote -a my-vue-app
git add .
git commit -m "Initial commit"
git push heroku master
```
使用Nginx和PM2部署到VPS的步骤如下：
1. 安装Nginx和PM2：
```bash
sudo apt-get update
sudo apt-get install nginx
npm install pm2@latest -g
```
2. 配置Nginx：
编辑Nginx配置文件：
```bash
sudo nano /etc/nginx/sites-available/my-vue-app
```
添加以下内容：
```nginx
server {
listen 80;
location / {
root /path/to/your/vue/dist;
try_files $uri $uri/ /index.html;
}
}
```
3. 启动Express应用：
```bash
pm2 start npm --name "my-vue-app" -- start
```
4. 重启Nginx：
```bash
sudo systemctl restart nginx
```
---
将Vue项目部署到Express服务器上主要分为四个步骤：构建Vue项目，配置Express服务器，部署静态文件，以及最终部署到生产环境。通过这些步骤，你的Vue应用就可以在Express服务器上运行了。