nginx部署vue应用与spring-boot后台

最新推荐文章于 2024-03-05 11:07:49 发布

原创

最新推荐文章于 2024-03-05 11:07:49 发布 · 置顶 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #linux #vue

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

前言

之前写过一篇关于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',
    port: port,
    proxy: {
   
   
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.</

最低0.47元/天解锁文章