nginx部署vue应用与spring-boot后台_如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的-优快云博客

本文链接：https://blog.youkuaiyun.com/Sunsscode/article/details/114521312

本文介绍了如何在nginx上部署vue应用和spring-boot后台，包括添加子域名、vue打包注意事项、nginx部署配置以及解决跨域问题。在vue打包时，需关注publicPath和axios的baseURL设置。在nginx配置中，通过location指定请求路径，解决跨域问题可添加add_header字段。此外，文章还提及了可能出现的405错误及其解决方案，以及避免端口冲突的教训。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

之前写过一篇关于nginx部署spring-boot的文章，这次再加上前端vue的部署，这样也算是整整齐齐了。

之前文章指路：阿里云CentOS-Nginx子域名转发-https访问-SpringBoot使用jar包部署一套完成！

文章目录

添加子域名

登录云解析控制台
在主域名下添加记录解析即为子域名
这次分别是两个，一个是vue的（xinqiao.nevercome.net）,还有一个是spring-boot的（xinqiaoapi.nevercome.net）

vue的打包

vue的打包要注意两点：

1 publicPath

publicPath虽然说是可以带子路径的，就比如说你用tomcat来部署，放在了webapps里面，那么目录的名称就是访问路径的子路径，比如说（www.nevercome.net/xinqiao）但是这里面有不少坑点，这和vue-router有点不太搭，如果vue-router的路由是后台动态拉取的总是会把配置的子路径给吞掉，目前我也没有找到好的处理方式，那么最好就是避免带上子路径，而且带着子路径的访问域名也不好看，远不如二级域名来得简洁直观。

也就是说理论上可以这样：

module.exports = {
   
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl(publicPath) 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/xinqiao/" : "/",
  
  utputDir: 'dist'
  // others...
}

但最好还是这样，以避免vue-router的bug

module.exports = {
   

  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  
  utputDir: 'dist'
  // others...
}

2 axios的baseURL

在开发环境下，也就是npm run dev,webpack是会提供一个devServer的，它可以根据配置来转发请求。就比如说这样子的配置：

devServer: {
   
    host: '0.0.0.0',