博文纲领：

nginx部署多个前后端项目

在Nginx上部署多个前后端项目的步骤如下：安装Nginx：首先，确保服务器上已经安装了Nginx。如果未安装，可以通过包管理器（如apt、yum等）进行安装。配置Nginx：打开Nginx的配置文件，通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/目录下的某个文件中。

nginx部署多个vue（nginx部署多个项目）

部署前后端分离项目时，使用 Nginx 做反向代理是主流做法。具体部署步骤包括后端接口的配置和前端资源的管理。后端项目可以部署在非 80 端口上，通过 Nginx 来转发请求至后端接口。以一个例子说明，例如使用 Spring Boot 启动 jar 文件，然后通过 Nginx 来配置转发规则，实现请求的正确路由。

前端采用Vue构建页面，后端通过Express编写接口，部署前需要做好vue项目打包和Nginx安装准备工作。以下是详细的部署步骤：第一步：配置Nginx首先，在Nginx安装目录（如：C：/nginx-10）的conf文件夹找到并打开nginx.conf文件。添加一个serve块，设置反向代理以监听5678端口，如：listen 5678。

vue3部署Nginx实现一个端口多个项目、多版本

在Vue3中通过Nginx实现一个端口部署多个项目和多版本的步骤如下：配置Vue项目：修改vite.config.js：为每个Vue项目设置不同的base配置项，作为项目的标识符。例如，对于项目1，设置base： /project1对于项目2，设置base： /project2，以此类推。

**配置 Nginx 配置文件 具体步骤如下：（1）将项目文件上传至服务器。（2）创建项目目录，建议以项目名称或当前版本名称命名。（3）修改 Nginx 配置文件，确保其正确映射项目路径与端口，然后重启 Nginx 服务以应用新配置。

实现多个vue项目在同一个端口部署的步骤如下：首先，调整项目的配置文件vite.config.js，在其中添加配置项base，将其值设为每个项目的标识符，如base：/project1。其次，修改vue-router路由创建的代码以适应新的配置。然后，运行项目并打包，确保配置正确无误。

这种方式只需要开放80端口，然后访问二级域名。这种方式的好处是只有一个server ，而且不需要二级域名、用路径location就能实现。但是这种方式的一个缺点，就是vue项目前端需要改配置。

Vue多页面应用与Nginx首先我们看一下nginx.conf配置文件为了方便管理，在/usr/local/nginx/conf.d/创建自己的*.conf配置文件。没有conf.d目录，直接mkdir创建conf.d.conf详细可参考：这种方式只需要开放80端口，然后访问二级域名。

/api/路径后是否跟有斜杠，需根据项目实际情况进行决定。 proxy_pass 8***.***：9199/； #替换为实际后端服务器地址和端口 在proxy_pass配置中，需特别注意添加斜杠。如果没有斜杠，直接访问将无法成功获取后端API。

nginx同时部署多个vue项目后请求刷新一直转圈

1、Nginx本地部署Vue项目在nginx中部署多个vue项目，并进行访问时，如果请求刷新一直转圈，可能是由于nginx的缓存配置问题引起的。首先，你可以查看nginx的配置文件（默认是nginx.conf文件），确认是否开启了缓存功能。

2、Nginx配置错误。请检查Nginx配置文件中的proxy_pass配置项是否正确，确保代理到正确的服务器地址和端口。这个配置项的作用是将所有请求转发到index.html页面，以便Vue路由在前端进行处理。

3、修改完Nginx配置后，重启Nginx服务以加载新的配置。可以通过命令nginx s reload来重载Nginx配置，而无需完全重启服务。通过上述步骤，你就可以在一个端口上成功部署多个不同版本的Vue项目，并通过Nginx进行路由转发和版本管理。

4、具体实现步骤如下：在路由跳转时，通过路由组件的props或query参数传递token值。在路由组件内部，检查并使用此token值进行相应的数据加载或身份验证。这样，应用在加载页面时就能够根据用户状态正确显示内容，避免路由跳转问题。

5、实现多个vue项目在同一个端口部署的步骤如下：首先，调整项目的配置文件vite.config.js，在其中添加配置项base，将其值设为每个项目的标识符，如base：/project1。其次，修改vue-router路由创建的代码以适应新的配置。然后，运行项目并打包，确保配置正确无误。

6、具体步骤如下：（1）将项目文件上传至服务器。（2）创建项目目录，建议以项目名称或当前版本名称命名。（3）修改 Nginx 配置文件，确保其正确映射项目路径与端口，然后重启 Nginx 服务以应用新配置。通过以上步骤，即可实现一个端口上部署多个 Vue 项目，满足多项目、多版本的运行需求。

nginx部署前端vue(nginx部署前端项目静态资源加载不全)

1、Nginx本地部署Vue项目在nginx中部署多个vue项目，并进行访问时，如果请求刷新一直转圈，可能是由于nginx的缓存配置问题引起的。首先，你可以查看nginx的配置文件（默认是nginx.conf文件），确认是否开启了缓存功能。

2、但是这种方式的一个缺点，就是vue项目前端需要改配置。

3、总结而言，解决Vue CLI项目在Nginx部署时的404错误和路由问题，需要从Nginx配置和项目内部路由管理两方面入手。通过正确配置Nginx和优化路由配置，确保应用能够正常加载和跳转。在特定情况下，采用在路由跳转时传递动态数据的方法，可以有效解决路由问题，实现更灵活的页面展示逻辑。

4、第一步：配置Nginx首先，在Nginx安装目录（如：C：/nginx-10）的conf文件夹找到并打开nginx.conf文件。添加一个serve块，设置反向代理以监听5678端口，如：listen 5678。第二步：开放端口允许Nginx监听2121的5678端口，以便外部访问。配置代码：server_name 2121。

5、使用Vuecli 0打包：在Vue项目的根目录下，运行打包命令。确保在config/index.js中配置了axios跨域策略，并在main.js中实现了API调用。打包文件位置：打包完成后，项目文件会位于dist目录，包含index.html和static文件夹。这些文件是准备部署到服务器上的。