nuxt打包路劲问题_Nuxt的127.0.0.1:80相关问题,关联Vue,webpack,cross-env

本文介绍了一个Nuxt项目在部署过程中遇到的跨域问题及解决方案。通过配置环境变量,利用Nuxt和Webpack的功能,实现了不同环境下的正确请求路径设置。

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

697c83244be8acc0b433de144581f5cc.png

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(貌似不能改,改也没用),简直不能再坑。

e781f24ee15a8d6294f359a6be4eb0a5.png

80端口

这个问题会导致两种情况:

  1. 直接访问api的path设置根路径,即/a/b/c,那么默认走127.0.0.1:80,在刷新页面的时候,抱歉,挂掉。
  2. 设置固定host,即host/a/b/c,刷新页面不挂,不过恭喜你,直接切换页面喜提跨域。
a077b1d97d89af49ff92876eb81159a4.png

跨域

主要处理的是问题二。

有人会说,我把跨域验证打开不就行了?没错,但是这个不是核心问题,核心问题是:你这个host在本地、测试、以及线上怎么区分!

方案

  1. 配置一个变量,手动切换,本地一种,测试一种,线上一种。
  2. 利用async的context上下文参数isDev处理。
  3. 环境变量处理。

先说方案一:

915451dfda8d7d64f527aaf316f8854a.png

手动修改

这个方案没任何毛病,也可以切实的解决问题。但是坑也很大,准确的说是麻烦很大。

如果我们前端每次都在发布的时候进行修改,那么可以解决本地到测试这个过程,但是测试到线上这个过程,我们前端涉及就相对不合适了,而且忒麻烦。

变通方案就是写脚本,然后测试到线上时候自动改变变量,然后打包,再改回去,避免持续集成出问题。

可以是可以,但是不优雅。

再说方案二:

方案二属于看似可以解决,实际屁用没有。

isDev只能区分打包是测试打包还是发布打包,遗憾的是,测试环境跟线上环境,应该都是发布打包,所以还是没法自动区分,最终还是会汇总回方案一。所以说,屁用没有。

完美方案,方案三:

这个方案就是利用webpack能力了,当然,结合Nuxt提供的接口会更加优雅。逻辑如下:

  1. package.json内部的scripts捕获npm run的命令携带的环境变量,并提供给Nuxt。
  2. Nuxt的配置文件,nuxt.config.js获取环境变量,并保存在process.env中。
  3. axios的create方法注入baseURL,使得每个请求都自动携带baseURL。
  4. axios改造为插件,并在通用http插件中引用。
  5. http所有请求直接使用根路径模式,即/a/b/c即可。

步骤配图如下:

8a5eff72c55f39ff09157da24706f91d.png

配置build

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

755adad67bdbeb20ad8c38536b03e7ce.png

nuxt.config.js

nuxt.config.js内部捕获。

8119f01eaab0d73902809dfe66a3188a.png

axios的create方法

这里设置axios的bashURL。

68cab0425682b87a45fe2e3ffcbb3a02.png

http请求框架中引用axios插件

http请求框架中引用axios插件,注意不是axios,是插件化的axios。

async asyncData(ctx) { let res = await http.post(`/a/b/c`, { arg: xxx }) return { data: res.data }},

使用根路径请求即可。

发布后尝试正常点击,并刷新页面试试看,妥了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值