通过环境变量配置axios的基地址

于 2023-07-14 20:02:08 发布
阅读量246 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mz929/article/details/131730575
版权
本文介绍了如何在Vue.js项目中通过环境变量配置axios的基地址，重点讲解了vue.config.js文件的作用以及.env.development和.env.production文件的使用，强调了自定义环境变量应以VUE_APP_开头，并提醒修改配置后需重启服务生效。
摘要由CSDN通过智能技术生成

环境变量

 

 前端项目启动时，占用端口号9528，是在哪里定义的呢？

在vue.config.js中配置的。下边我们来学习一下它的用法，从而了解环境变量的使用。

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。官网地址： 地址

下图是开发环境服务端口的在vue.config.js中 位置

image.png

 我们看到上面的 proce

最低0.47元/天 解锁文章
mz929
关注
Vue3小兔仙电商项目实战
郭宝的博客
08-16 467
在编写代码的过程中，一旦输入 @/ ，webstorm就会立即 联想出src下的所有子目录和文件，统一文件路径访问不容易出错。
配置环境变量，封装 axios 模块
qq_45605589的博客
11-17 828
封装axios，能实现在 开发 || 生产 状态下，可以设定不同BaseUrl的能力
axios的二次封装，解耦，环境变量，跨域
m0_45218136的博客
11-08 429
axios的封装，解耦，环境变量，跨域
axios封装+多环境变量(新手一看就会)
码农日常的博客
08-30 769
这里总结三种变量环境(生成环境,开发环境,测试环境) 通过npm run serve启动本地 , 执行development 通过npm run test打包测试 , 执行testing 通过npm run build打包正式 , 执行production package.json配置 一般自动生成二个 追加一个 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service buil...
axios请求环境设置
qq_41716608的博客
03-14 326
npm install --save axios下载axios 在src文件夹下的main.js中添加 import axios from 'axios' Vue.prototype.axios = axios 3.实现网络请求 get方式： post方式： ...
vue-cli3根据不同环境配置axios的baseUrl
Dj_Fairy的博客
03-31 6331
下面我将介绍三种环境的baseUrl配置 开发环境、测试环境以及生产环境 在vue-cli3中，npm run serve时会把process.env.NODE_ENV设置为‘development’； npm run build时会把process.env.NODE_ENV设置为‘production’； 因而，接下来我们要设置一个测试环境的process.env.NODE_ENV 首...
一篇文章带你认识环境变量
GZZ__z的博客
12-20 732
1.认识环境变量---端口配置 首先要知道端口配置是在哪里配置的？ 在vue.config.js中配置的，vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack,相当于改良版的webpack 如图，是开发环境服务端口的位置: 我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？ 在项目下, 我们发现了.env.development和.env.production两个文件 .
vue项目静态资源中配置接口地址
李三丧的博客
06-04 6295
开发过程中，端口变动十分常见，测试和上线后的后端接口大部分就不同，所以将接口地址放到配置文件中是必不可少的。 一、在静态文件夹中新建 config.json文件，文件中存放接口地址等地址配置信息。 例： { "axios": { "baseUrl": { "desc": "说明：后端数据接口基地址", "value": "http://****.232:...
vue-promise-axios
weixin_57218747的博客
07-12 516
1 回调函数 1.1 回调函数定义： ① 函数是不是你定义的 你定义的 ② 函数你要有没有调用 你没调用 ③ 最终函数有没有被执行 最终执行了 1.2 回调函数分类： 同步的回调：数组api中的回调函数基本都是同步的；promise的执行器是同步的 异步的回调：定时器的回调 dom事件的回调 ajax请求的回调 遇到异步回调函数需注意以下两点： ① 回调什么时候进队列 ② 回调什么时候被执行 内存结构：堆 栈 队列 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存
axios配置
qq_42740441的博客
04-17 653
1.axios发送get和post请求两种方法 （1）get请求 getArticleList: (params, limit = 20) => { return axios.get( http://192.168.101.146:8083/guoyuan/h5/wscn-articles?limit=${limit}&category=${params} ).then(res =&...
css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用
SilentLand的博客
10-02 756
css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用
vue配置环境变量，通过环境变量配置devServer.proxy和axios的baseURL
qq_34458968的博客
09-09 3166
vue配置环境变量，通过环境变量配置devServer.proxy和axios的baseURL
vue设置axios请求接口基址和代理接口地址
热门推荐
weixin_43901550的博客
06-28 1万+
适用于vue-cli3以上版本搭建的项目 一、接口基址（单个接口地址） 如果你的项目只有一个服务器访问地址（接口地址），不调用别的接口地址的话可以直接在src下的main.js中设置axios的默认基址 //main.js中 import axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL='http://localhost:3000';//设置基址 二、代理接口地址 如果你的项目需要访问多个地址，即调用多个不同的接
vue配置环境变量
weixin_46122878的博客
11-10 1177
vue配置环境变量
axios基本配置
Lrn的博客
11-24 691
axios配置 1. baseURL 针对于一个项目的开发分为开发环境，测试环境，线上环境等分别有3个请求地址与其一一对应，但是axios的请求ip却只有一个字段baseURL控制，我们可以通过if else等条件判断去赋值，但是当我们使用三方UI框架进行上传文件等需求时还需要做相应的判断这样会太麻烦，而且有可能切换环境时出现少漏改等现象，所以建议直接创建对应三个环境的配置文件，直接axios.defaults.baseURL = process.env.url; 对于vue2.x版本可以在confi
Vue中axios二次封装，环境变量配置，代理，打包注意的地方
最新发布
weixin_41977129的博客
07-04 473
vue axios二次封装 环境变量，打包，代理
Ajax - axios拦截器 axios基地址 get与post请求区别*
weixin_68531033的博客
05-08 814
axios拦截器的使用 /* axios拦截器工作流程 1. axios 发起请求 2. 执行 请求拦截器 : 添加ajax发送请求之前的操作 3. 服务器 接收、处理、响应 请求 4. 执行 响应拦截器 ： 添加服务器响应之后的操作 4. axios 接收响应(执行then方法) */ //打断点 定时器 ajax 事件处理函数 回调函数 打在函数体内部 /* 1.axios拦截器作...
Vue3.0环境变量配置与模块化封装实践
在 Vue 3.0 的开发环境中，...Vue 3.0 环境变量配置的关键在于管理不同的环境变量，并确保在代码中灵活应用，例如通过 Axios 的动态 URL 和 Vue CLI 的配置文件来实现。这有助于项目在不同环境下运行得更加稳定和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值