nginx部署前端vue项目

2025-04-1904:10:02常识分享0

我的目标是实现以下效果(假设IP地址为localhost,端口号为8080):

让我们开始配置的详细步骤。

在config文件夹下的index.js文件中,由于是进行打包操作,我们需要在build.assetsPublicPath中更改对应项目名。例如,

注意:由于我在项目中使用了BASE_API作为代理的前缀,如果你的项目中没有这个配置,你需要找到你自己的代理配置并进行相应调整。

接下来,我们开始在conf文件夹下的nginx.conf文件中进行配置。

由于我是在原有基础上追加的代码,因此直接贴出我追加的部分,其他部分保持原样。

当所有的配置完成后,我们就可以启动nginx了。如果对此有疑问,可以自行查找解决方案。

启动成功后,在浏览器中输入localhost:8080,你将看到项目一和项目二的链接。

点击项目一,链接将变为localhost:8080/project1;点击项目二,链接将变为localhost:8080/project2。这完全符合我们的预期,操作成功。