
Nuxt
场景
之前页面都是php铺设的,入职(远程兼职)后需要重构为前后端分离模式,由于再之前的前端有做过一点点分离,使用了Vue,故而继续使用Vue重构。之前的Vue只是在原有的php内部进行改造,并非独立出来。当下的需求是完全独立出来,主业务独立出来的页面由nginx代理两个端口,抽离的项目完全脱离原有php项目。
由于有较强的SEO需求,故而最终选用了Nuxt框架实现SSR,从而做到SEO友好。
问题
开发过程中遇到这么个恶心的问题,三种环境的host设置问题:本地、测试、线上。
因为要SEO友好,所以绝大多数页面都需要使用Nuxt的asyncData请求来实现title的动态,保证爬虫的爬取。
async asyncData(ctx) { let res = await http.post(`/a/b/c`, { arg1: xxx }) return { data: res.data }}而asyncData有个坑,就是不走开发中设置的axios代理(先于页面渲染),默认访问127.0.0.1:80为host与port(貌似不能改,改也没用),简直不能再坑。

80端口
这个问题会导致两种情况:
- 直接访问api的path设置根路径,即/a/b/c,那么默认走127.0.0.1:80,在刷新页面的时候,抱歉,挂掉。
- 设置固定host,即host/a/b/c,刷新页面不挂,不过恭喜你,直接切换页面喜提跨域。

跨域
主要处理的是问题二。
有人会说,我把跨域验证打开不就行了?没错,但是这个不是核心问题,核心问题是:你这个host在本地、测试、以及线上怎么区分!
方案
- 配置一个变量,手动切换,本地一种,测试一种,线上一种。
- 利用async的context上下文参数isDev处理。
- 环境变量处理。
先说方案一:

手动修改
这个方案没任何毛病,也可以切实的解决问题。但是坑也很大,准确的说是麻烦很大。
如果我们前端每次都在发布的时候进行修改,那么可以解决本地到测试这个过程,但是测试到线上这个过程,我们前端涉及就相对不合适了,而且忒麻烦。
变通方案就是写脚本,然后测试到线上时候自动改变变量,然后打包,再改回去,避免持续集成出问题。
可以是可以,但是不优雅。
再说方案二:
方案二属于看似可以解决,实际屁用没有。
isDev只能区分打包是测试打包还是发布打包,遗憾的是,测试环境跟线上环境,应该都是发布打包,所以还是没法自动区分,最终还是会汇总回方案一。所以说,屁用没有。
完美方案,方案三:
这个方案就是利用webpack能力了,当然,结合Nuxt提供的接口会更加优雅。逻辑如下:
- package.json内部的scripts捕获npm run的命令携带的环境变量,并提供给Nuxt。
- Nuxt的配置文件,nuxt.config.js获取环境变量,并保存在process.env中。
- axios的create方法注入baseURL,使得每个请求都自动携带baseURL。
- axios改造为插件,并在通用http插件中引用。
- http所有请求直接使用根路径模式,即/a/b/c即可。
步骤配图如下:

配置build
区分build与build_release,测试与线上脚本走的时候处理下。

nuxt.config.js
nuxt.config.js内部捕获。

axios的create方法
这里设置axios的bashURL。

http请求框架中引用axios插件
http请求框架中引用axios插件,注意不是axios,是插件化的axios。
async asyncData(ctx) { let res = await http.post(`/a/b/c`, { arg: xxx }) return { data: res.data }},使用根路径请求即可。
发布后尝试正常点击,并刷新页面试试看,妥了。
本文介绍了一个Nuxt项目在部署过程中遇到的跨域问题及解决方案。通过配置环境变量,利用Nuxt和Webpack的功能,实现了不同环境下的正确请求路径设置。

被折叠的 条评论
为什么被折叠?



