vue.js项目nginx部署教程

下面提供一份Vue.js项目Nginx部署的攻略，包含了具体的步骤和两条示例说明：

1. 环境准备

• 安装Vue CLI

根据Vue官方文档的指引，使用npm命令全局安装Vue CLI：

npm install -g @vue/cli

• 构建Vue.js项目

使用Vue CLI构建一个Vue.js项目，在该项目中创建示例代码，确保能够在开发环境中成功运行。

• 安装和配置Nginx

在服务器上安装Nginx，并进行基本的配置。例如，将Nginx的配置文件修改为/etc/nginx/conf.d/default.conf，并确保Nginx能够正常运行。

2. Vue.js项目打包

在准备好的Vue.js项目上运行以下命令，将项目打包：

npm run build

在运行该命令后，Vue.js会在项目目录生成一个dist目录，其中包含了打包后的所有静态资源。

3. 配置Nginx

将Nginx的配置文件修改为以下内容：

server {
    listen       80;
    server_name  example.com;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /api/ {
        proxy_pass http://your-api-server:3000/;
    }

    location /static/ {
        alias /your/vue/project/dir/dist/static/;
    }

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

其中，example.com是你的域名，在location /api/中，将your-api-server替换为你的API服务器地址，在location /static/中，将/your/vue/project/dir/dist/static/替换为你的Vue.js项目打包后的/static/存放路径。

4. 重新启动Nginx

输入以下命令，重新启动Nginx，并确保在浏览器访问你的网站时，能够成功加载Vue.js项目和API服务器。

sudo systemctl restart nginx

示例说明

1. 示例一：封装API服务器

例如，有一个前后端分离的系统，使用Vue.js构建前端，使用Node.js和Express构建API服务器。

如果Vue.js项目部署在example.com域名上，API服务器部署在localhost:3000上，需要修改Nginx配置文件如下：

location /api/ {
    proxy_pass http://localhost:3000/;
}

这样，就可以通过API服务器的接口访问相应的数据。

1. 示例二：反向代理其他服务

例如，需要将example.com映射到https://www.google.com上。

这种情况下，只需要在Nginx的配置文件中添加以下内容即可：

location / {
    proxy_pass https://www.google.com/;
}

这样，就可以通过访问example.com来访问google.com。