Vue项目的多种部署方式

在开发Vue项目的过程中，部署是非常重要的一步。为了更好地理解和部署Vue项目，我将向您介绍两种常见的部署方式：将Vue打包后放在静态资源文件夹下和利用Nginx做代理进行部署。
一、将Vue打包后放在静态资源文件夹下
这种方式是将Vue项目打包后，将其作为一个静态资源放置在Spring Boot项目的static文件夹下。这样做的优点是部署相对方便，可以与Spring Boot项目一起打包成JAR包，启动也十分便捷。然而，这种方式的缺点是可能会互相影响。
以下是具体步骤：

1. 将Vue项目打包：在项目根目录下运行npm run build命令，这将会生成一个dist文件夹，里面包含了打包后的静态资源文件。
2. 将打包后的文件放入Spring Boot项目的static文件夹下：将dist文件夹中的文件复制到Spring Boot项目的static文件夹下。
3. 启动Spring Boot项目：运行Spring Boot项目，访问路径为http://ip:port/xxx/index.html（xxx为项目前缀，如果没有设置则不写。如果有做静态文件请求的拦截，记得放开。
   二、利用Nginx做代理进行部署
   另一种部署方式是利用Nginx做代理进行部署。这种方式将Vue和Spring Boot项目分开部署，可以避免互相影响。不过，这种方式相对于第一种方式稍微复杂一些。
   以下是具体步骤：
4. 安装Nginx：根据您使用的操作系统，安装Nginx服务器。在安装过程中，请确保已启用Nginx代理模块。
5. 配置Nginx代理：打开Nginx配置文件（通常位于/etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf），添加以下配置：

   location / {
   proxy_pass http://localhost:8080/;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   }

   上述配置将所有访问请求代理到localhost:8080（假设Spring Boot项目运行在8080端口），并传递必要的请求头信息。
6. 重启Nginx服务：保存配置文件后，重启Nginx服务以使配置生效。在Linux系统上，可以使用以下命令重启Nginx服务：sudo service nginx restart或sudo systemctl restart nginx。
7. 部署Vue项目：将Vue项目打包后放置在Web服务器上，可以通过Nginx提供访问。在Nginx的配置中，可以添加对Vue项目的路由规则，以提供对不同页面的访问。例如，在配置文件中添加以下内容：

   location /vue {
   alias /path/to/vue/dist;
   index index.html;
   }

   上述配置将所有以/vue开头的请求映射到Vue项目的dist文件夹下，并指定index.html为默认的入口文件。
8. 启动Spring Boot项目和Nginx服务：分别启动Spring Boot项目和Nginx服务，确保它们正常运行。现在，您可以通过访问Nginx服务器的IP地址或域名来访问部署的Vue项目了。
   以上就是两种常见的Vue项目部署方式。根据您的实际需求和环境配置，可以选择适合您的部署方式。如果您需要更灵活的部署方案或者需要处理复杂的跨域请求，可以考虑使用第二种方式——利用Nginx做代理进行部署。