Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >nuxt如何在nuxt构建后手动更改axios baseUrl

nuxt如何在nuxt构建后手动更改axios baseUrl
EN

Stack Overflow用户
提问于 2020-06-08 08:06:49
回答 3查看 2K关注 0票数 0

现在我有一个问题,如何在构建后手动更改axios baseUrl。如果指定的请求url更改了,我可以手动更改baseUrl,而不是重新构建项目

EN

回答 3

Stack Overflow用户

发布于 2020-06-08 08:10:20

您必须使用axios.create()函数创建一个新的axios实例。然后,您可以使用此实例在新的baseUrl上进行调用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const myNewInstance = axios.create({
  baseURL: 'https://my-domain.com/api/',
  timeout: 3000,
  headers: {'X-Custom-Header': 'foobar'}
});

您还可以将其原型化为plugin中的Vue对象,然后可以从所有组件和页面访问它。

票数 0
EN

Stack Overflow用户

发布于 2020-06-08 09:12:45

您可以使用名为API_URL的环境变量覆盖baseUrl。只需将其设置为您需要的任何URL。请参考官方文档:https://axios.nuxtjs.org/options.html#baseurl

此外,如果您还想覆盖browserBaseUrl,可以使用API_URL_BROWSER环境变量以相同的方式执行此操作。

提示:您可以通过添加环境变量前缀来设置单个命令的环境变量。因此,从技术上讲,这应该是可行的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
API_URL="https://example.com" nuxt start
票数 0
EN

Stack Overflow用户

发布于 2020-06-17 07:41:04

使用跨环境:npm install cross-env

在你的项目中,添加一个名为environment的文件夹,在这个文件夹下,你可以有不同的environment (例如,开发,试运行,生产)

您的环境配置将具有您的baseUrl和其他配置,例如,对于开发,您可以拥有本地主机,而对于暂存或生产,您可以拥有API_URL

defaults.json \\development

defaults.prod.json \\production

nuxt.config.ts build > extend中配置不同的环境

这将替换defaults.json,这取决于我们将在package.json中运行脚本的环境。

package.json中,将脚本配置为将运行的环境(例如,npm run start将使用NODE_ENV=development,它将对baseUrl: http://localhost:3000使用defaults.json,而npm run build将对baseUrl: http://www.API_URL.com和其他配置使用defaults.prod.json

有关更多详细信息,请参阅cross-env

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62257635

复制
相关文章
Nuxt使用axios请求后端数据及发布
asyncData 方法会在组件每次加载之前被调用 asyncData 可以在服务端或路由更新之前被调用 asyncData 返回的数据融合到组件的data方法 asyncData 方式是在组件初始化前被调用,方法内饰无法通过this来引用组件的实例对象
明知山
2020/12/17
1.4K0
点亮你的Vue技术栈,万字Nuxt.js实践笔记来了
作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮。
WahFung
2020/08/24
24K0
点亮你的Vue技术栈,万字Nuxt.js实践笔记来了
如何使用webify快速构建Nuxt应用
Webify是云开发团队推出的一款一站式托管服务产品,这是一个专为 Web 开发者打造的云上开发、部署平台,帮助开发者快速开发、预览、部署自己的 Web 应用,还支持从Github等第三方代码托管平台导入应用,为前端开发者提供极佳的服务体验。
腾讯云开发TCB
2021/09/29
9300
如何使用webify快速构建Nuxt应用
在nuxt.js项目中对axios进行封装
不管是在服务端还是客户端获取数据都可以使用axios。在实际的开发过程中,每次请求中往往要携带一些自定义的参数或进行一些统一的处理,所以对axios进行封装是必不可少的。那么对于axios封装应该写在那个目录下呢?
用户3258338
2019/09/17
6.3K0
Nuxt使用axios跨域问题解决方法
Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案。而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。
用户6167509
2020/07/06
5.3K0
Nuxt 3 来了!
NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个开源的框架,让 Web 开发变得简单而强大。Nuxt 3.0 来了,让我们一起来看看它有哪些让人激动的新特性!
ssh_晨曦时梦见兮
2022/03/10
2.2K0
Nuxt 3 来了!
nuxt「建议收藏」
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
全栈程序员站长
2022/09/20
4K0
Nuxt 3 来了!
NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个开源的框架,让 Web 开发变得简单而强大。Nuxt 3.0 来了,让我们一起来看看它有哪些让人激动的新特性!
玖柒的小窝
2021/09/27
1.9K0
Nuxt 3 来了!
Vue 服务端渲染原理解析与入门实战
在以往的概念里,渲染的工作更多的是放在客户端进行的,那么为什么现在我们要让服务端来做这个工作?
西岭老湿
2021/02/22
7.8K0
Vue 服务端渲染原理解析与入门实战
Nuxt引用cookie-universal-nuxt在服务端请求cookie
官方文档 npm install cookie-universal-nuxt -s 在nuxt.config.js添加 modules: [ 'cookie-universal-nuxt', ['cookie-universal-nuxt', { alias: 'cookiz' }], ], 设置cookie this.$cookies.set('token', data.token) 在asyncData打印 async asyncData({ app }) { consol
明知山
2021/04/20
2.4K0
前后端分离Nuxt.js解决SEO问题
背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样式错乱的问题,并且要迎合上级一天三遍样式需求,因此决定用前后端分离。考虑到网站的推广,又必须做SEO。前端框架选择VUE,解决SSR顺便选择了nuxt.js,此为背景。
小尘哥
2018/08/15
4.2K0
前后端分离Nuxt.js解决SEO问题
Nuxt 踩坑记
Nuxt 是一个服务端渲染框架,与普通的前后端分离不同(需要同时开两个端口进行开发),而 Nuxt 只需要开一个服务端的端口。默认是 3000。使用 Nuxt 脚手架建立一个 Express.js 模板,打开 server/index.js,发现其中有一行为 app.use(nuxt.render),这行为 Vue-ssr 全部路由的捕获,在这一行下面的所有应用的路由都无法生效,因为 Express 会从上往下检测路由的可达性,一旦有就停止搜索。所以自定义的 API 路由需要放在这行上面。
Innei
2021/12/28
2.2K0
Nuxt配置错误页面
在layouts文件夹新建error.vue <template> <div> <h2 v-if="error.statusCode == 404">404 - 页面不存在</h2> <h2 v-else>服务器错误</h2> <button> <nuxt-link to="/">HOME</nuxt-link> </button> </div> </template> <script> export default { props: ['e
明知山
2021/01/20
1.4K0
记一次 Nuxt.js 登录页性能优化(性能提升十倍加)
最近有测试和 local 投诉,我们管理系统的登录页面经常加载很久,常常会有页面已经出来了,但是点击登录毫无反应,直到全部加载后才能登录。于是,他们提出让我们去优化。
coder_koala
2020/11/10
3.3K0
记一次 Nuxt.js 登录页性能优化(性能提升十倍加)
React.js 结合 Next.js 的入门与 Snapaper 完全重构
背景 申请季开始进入尾声... 前段时间有幸和「哈陆 Halu」一位去年刚入学加拿大滑铁卢大学的 dalao 通过交换友情链接认识了,他的博客链接是 → https://halu.lu ,保存在「伙伴」栏目名为「無位小站」。借着讨论 Nuxt.js 的机会和他聊了一聊,了解了一些他参加的 Co-op 项目和滑大数学系的情况... 他在博文中有提到他收到的另一所学校录取——华盛顿大学(也是 UW 🙂 ) 其世界综合排名会考前很多 (在 2020 US News 世界大学排名中最靠前,第 10 名,实属 da
Tony He
2022/11/17
4.4K0
React.js 结合 Next.js 的入门与 Snapaper 完全重构
谷粒学院整合NUXT
​ 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据。
OY
2022/03/20
2.3K0
谷粒学院整合NUXT
Vue Nuxt.js 概述
1. Nuxt.js 概述 1.1 我们一起做过的SPA SPA(single page web application)单页 Web 应用,Web 不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统等等,组成的应用程序。 我们之前学习的Vue就是SPA中的佼佼者。 SPA 应用广泛用于对SEO要求不高的场景中 1.2 什么是SEO SEO:搜索引擎优化(Search Engine Optimization), 通过各种技术(手段)来确保,我们的Web内容被搜索引擎
Maynor
2021/12/14
8.7K0
Vue Nuxt.js 概述
记一次 Nuxt.js 登录页性能优化
最近有测试和 local 投诉,我们后台管理系统的登录页面经常要加载很久,常常会出现页面已经显示出来了,但是点击登录毫无反应,直到全部加载后才能登录。于是,他们提出让我们去优化。
尹光耀
2021/10/19
1K0
如何在Nuxt应用程序中加载外部脚本
我需要加载一个样式表和几个脚本。我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。
前端知否
2020/03/23
5K1
Vue开始使用NUXT框架开发
Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如服务端渲染、SEO、中间件支持、布局支持等。
码客说
2019/10/21
2.3K0

相似问题

如何在nuxt/axios中设置baseUrl?

2198

来自域名的Nuxt BaseUrl

231

尽管设置正确,但Nuxt.Js axios不使用baseURL

20

如何在nuxt中获得axios?

80

Nuxt Axios动态url

32
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文