一:开发环境
1、Sprinbgoot的后端配置
后端没有任何项目路径,如登录接口就是:localhost:8080/login
2、前端vue配置反向代理
lcoalhost:3001/${process.env.VUE_APP_BASE_API}/login 会自动代理到 localhost:8080/login,其中${...API}为环境变量。这里为了方便使用stage-api
二:开发环境
后端不是很简单,这里着重将vue的部署,vue部署分为2种,一是直接打包放到后端的/resource文件夹下,而是部署到nginx中。这里主要第二种。
vue打包部署配置nginx:第一步,通过nginx访问vue打包的index.html的静态页面。第二步:配置访问后端API的接口(即开发环境的devServer在打包后失效)。
1. vue打包:npm run build
2.安装Nginx
(1) 在nginx目录下的html目录下,新建一个项目文件夹(我建立的是visWeb)
(2)将vue的dist全部移动这个文件夹下
(3)Nginx配置vue的index.hmtl
(4) 配置Nginx的Api的反向代理
主要是 ip:9527/stage-api/xxxx转到后端访问 ip:8080/xxxx
到这里部署完成
解决页面刷新404的问题:
第一步:vue项目的路由改成hash模式。
第二步:nginx配置文件重试
第三步:刷新nginx