Vue.js项目部署到服务器的详细步骤

下面来详细讲解“Vue.js项目部署到服务器的详细步骤”。

1. 前置条件

在进行 Vue.js 项目部署之前，需要在服务器上安装 Node.js 和 Git 工具。如果你的服务器已经安装过了，那么可以跳过此步骤。

安装 Node.js：

# 安装 Node.js
sudo apt-get update
sudo apt-get install nodejs

# 安装 Node.js 包管理工具 npm
sudo apt-get install npm

安装 Git：

# 安装 Git
sudo apt-get install git

2. 构建 Vue.js 项目

将 Vue.js 项目代码上传到服务器后，需要构建项目。构建项目会生成打包后的静态文件，对于 Vue.js 项目来说，打包后的文件通常位于 dist 目录下。

在项目根目录下运行以下命令构建项目：

npm install
npm run build

3. 部署 Vue.js 项目到服务器

构建完成后，将打包后的项目上传到服务器，具体上传方式可以使用 FTP 或者 SCP 等命令行工具上传，也可以使用一些 GUI 工具，例如 FileZilla 等。

上传完成后，将 dist 目录下的文件复制到服务器上的网站根目录下，这里以 /var/www/html 为例。

sudo cp -r /path/to/your/vue/project/dist/* /var/www/html/

4. 配置 Nginx

Nginx 是一个高性能的 Web 服务器，它可以用来代理静态和动态 HTTP/HTTPS 流量以及作为负载均衡器、反向代理和 HTTP 缓存等。

这里以在 Ubuntu 系统上安装 Nginx 为例，如果你已经安装了 Nginx 并且做好了相关配置，可以直接跳过此步骤。

# 安装 Nginx
sudo apt-get update
sudo apt-get install nginx

# 启动 Nginx
sudo systemctl start nginx

# 确认 Nginx 服务已经正确启动
sudo systemctl status nginx

为了让 Nginx 转发请求到我们的 Vue.js 应用，我们需要打开 Nginx 的配置文件 default：

sudo nano /etc/nginx/sites-available/default

修改 default 文件，配置反向代理到 Vue.js 应用的部署目录：

server {
  listen 80;
  server_name yourserver.com;

  root /var/www/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  # 反向代理到 Vue.js 应用
  location /api/ {
    proxy_pass http://localhost:3000/; # Vue.js 应用部署的端口号
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

保存并退出。

检查 Nginx 配置是否有误，如果无误则启动 Nginx 服务：

sudo nginx -t
sudo systemctl restart nginx

5. 启动 Vue.js 应用

如果 Vue.js 应用是一个 SPA（单页应用）的话，需要在服务器上启动一个 Node.js 服务器，在该服务器上运行 Vue.js 应用。

例如，我们在 Vue.js 应用的根目录下创建了一个文件 app.js，该文件用于启动 Vue.js 应用：

const express = require('express')
const app = express()

// 静态文件服务
app.use(express.static('dist'))

// 所有请求都返回 index.html
app.get('*', (req, res) => {
  res.sendFile(__dirname + '/dist/index.html')
})

// 启动服务器
app.listen(3000, () => {
  console.log('Vue.js app is running at http://localhost:3000')
})

通过使用 SSH 连接到服务器，我们可以在服务器上启动该文件：

node app.js

运行后，我们可以在浏览器中访问该服务器的公网地址，并检查 Vue.js 应用是否已经部署成功。

示例说明

示例 1：通过 FTP 上传 Vue.js 项目

假设你有一个 Vue.js 项目，项目文件夹名为 my-project，在本地通过 FTP 软件将 my-project 文件夹上传到了服务器上的 /var/www/html 目录下。

在服务器上运行以下命令构建项目：

cd /var/www/html/my-project
npm install
npm run build

构建完成后，将 my-project 下的 dist 目录下的文件复制到服务器上的网站根目录下 /var/www/html/。

sudo cp -r /var/www/html/my-project/dist/* /var/www/html/

然后按照上述步骤进行配置和启动即可。

示例 2：使用 PM2 管理 Vue.js 应用进程

假设你的 Vue.js 应用已经部署到服务器上，并且已经启动了 Node.js 服务器为该应用提供服务，我们可以使用 PM2 来管理应用进程。

首先，使用 SSH 连接到服务器上，安装 PM2：

sudo npm install pm2 -g

然后，在 Vue.js 应用的根目录下运行以下命令启动应用：

pm2 start app.js --name my-vue-app

这样，我们就可以使用 PM2 来管理 Vue.js 应用的进程了，例如重启进程等操作：

# 重启 Vue.js 应用的进程
pm2 restart my-vue-app