nginx部署vue项目的详细图文教程

下面是“nginx部署vue项目的详细图文教程”的完整攻略。

环境准备

一台服务器，推荐使用 Ubuntu 系统
安装 Nginx sudo apt-get install nginx
安装 Node.js sudo apt-get install nodejs
安装 npm sudo apt-get install npm

创建 Vue 项目

首先，我们需要创建一个 Vue 项目。

# 安装 Vue CLI
npm install -g vue-cli

# 创建一个新项目并进入该项目的目录
vue init webpack my-vue-project
cd my-vue-project

构建 Vue 项目

在进入 Vue 项目目录后，我们需要对项目进行构建。构建后的文件将会存放在 dist 目录中。

npm install
npm run build

配置 Nginx

在完成项目构建后，我们需要配置 Nginx，让 Nginx 服务器能够访问我们的 Vue 项目。

首先，我们需要在 /etc/nginx/sites-available 目录下创建一个新的文件，例如 my-vue-project。

cd /etc/nginx/sites-available
sudo touch my-vue-project
sudo nano my-vue-project

挑选以下代码，替换文件中的代码：

server {
    listen 80;
    server_name example.com; # 将 example.com 替换为你的域名

    root /var/www/my-vue-project/dist; # 将 my-vue-project 替换为你的项目名称
    index index.html;

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

重启 Nginx 服务器。

sudo systemctl restart nginx

示例说明

示例一

在此示例中，我们的域名为 example.com，Vue 项目的名称为 my-vue-project。

首先，我们需要在域名相关的 DNS 服务器中添加一项 A 记录，将该域名解析到当前服务器的 IP 地址。

然后，我们需要在服务器上执行以下命令，安装 Nginx、Node.js 和 npm。

sudo apt-get update
sudo apt-get install nginx nodejs npm

接下来，使用 vue-cli 创建新的 Vue 项目，并构建该项目：

vue init webpack my-vue-project
cd my-vue-project/
npm install
npm run build

在项目构建完成后，我们需要在 Nginx 中添加一个新的虚拟主机，用于访问该 Vue 项目。

cd /etc/nginx/sites-available/
sudo nano my-vue-project

我们将 Nginx 配置文件改为下面这样：

server {
    listen 80;
    listen [::]:80;
    server_name example.com;

    root /var/www/my-vue-project/dist;
    index index.html index.htm index.nginx-debian.html;

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

我们在配置文件中指定了访问项目的目录，并且在 location 块中指定了将所有请求都重定向到 index.html 文件。

保存文件并退出编辑器。启用刚刚新建的 Nginx 配置文件。

sudo ln -s /etc/nginx/sites-available/my-vue-project /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

现在，Vue 项目已经成功部署在 Nginx 上了。你可以通过访问 http://example.com 来查看项目是否上线成功。

示例二