需求描述:
1- 项目部署时存在两个Nginx, 一个Nginx支持vue项目的基本配置, 但是项目入口要配置在上一层Nginx上, 而且上一层Nginx包装了一层上下文;
2- 页面跳转时要保持上一层Nginx的上下文;
3- URL可以正常刷新
方案一:
上层Nginx的上下文转发时不转发到下层Nginx, 只做一层上下文的包装.
问题1: 静态资源加载失败
原因: 默认打包状态中静态资源加载路径单独设置.
解决方案: vue.config.js文件中找到modules.export中的publicPath参数, 该参数前面拼接上上层Nginx上下文即可;
问题2: 上层Nginx上下文丢失
原因: 在vue的导航守卫中, 当检测到用户未登录,会直接跳转到/login路径,该跳转并不会进行服务器的访问,所以可以成功显示登陆页面, 但是同时也造成了上层Nginx的上下文丢失
解决方案: 修改导航守卫,当用户未登录时跳转路径增加上下文.
??????? 这种方案可能会造成页面儿无法访问, 因为在原因分析中提到登录页面并不是访问服务器获得,而是根据vue的路由规则在前端自动跳转的, 如果增加了上下文可能造成路由无法命中, 可能直接显示无该页面, 也可能陷入登录页面调用循环, 有待进一步验证
问题3: 刷新后页面丢失
原因:
1- 由于问题2中上下文已经丢失, 在上层Nginx中配置的转发策略失效,造成刷新丢失.
解决方案: 优先解决问题2
方案二:
上层Nginx的上下文转发时带到下层Nginx, vue项目中也要同步增加该上下文
问题1: 找不到页面
原因: 由于多了上下文, 在寻找入口index.html时,会在dist中上下文文件夹中寻找入口文件
解决方案: vue打包是在dist中增加上下文路径, 在vue.config.js中修改
问题2: 上层Nginx上下文丢失
解决方案同方案一的问题2, 对于由此引起的问题, 可以修改vue中登录页面的路由,增加上下文
问题3: 静态资源加载失效
同方案一的问题1
问题4: 登录页面循环很多次进入
原因分析: 含上下文的登录接口没有加入白名单中, 在导航守卫白名单中添加新路径
问题5: 后台接口访问错误
原因分析: 下层Nginx配置中,需要在跳转后台接口转发策略中增加新的上下文;
问题6: 进入用户页面后依然没有上下文
原因分析: 在登录界面代码中, 登录成功后跳转页面是写死的,这里增加上下文;
总结:
经测试两种方式均可以完成增加上下文的功能,具体配置方案如下:
方案一
1- 修改publicPath值,该参数会在访问静态资源时拼接到静态资源路径前面。
2- 修改前端路由,添加统一上下文。该参数会拼接到所有定义路由前面。
3- 修改vue打包路径。多加一层路径与上下文一致
4- 在白名单中加入添加上下文的登录请求
5- Nginx配置, 采用连同上下文一起转发策略。
方案二
1- 修改publicPath值,该参数会在访问静态资源时拼接到静态资源路径前面。
2- 修改前端路由,添加统一上下文。该参数会拼接到所有定义路由前面。
3- Nginx配置,采用转发后不带上下文策略。