在vue的项目中webpack配置将开发测试的接口请求地址和发布的请求地址分开且发布与测试互不影响

最新推荐文章于 2022-07-29 21:43:14 发布
最新推荐文章于 2022-07-29 21:43:14 发布
阅读量912 收藏 1
点赞数
分类专栏： vue 文章标签： vue测试发布 vue接口请求分开 webpack配置请求 webpack测试与发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012396955/article/details/88292718
版权

看着标题感觉很复杂的样子，其实，就是改2个字符串就能实现的东西！！是不是很惊讶！！
来，上图！！主要跟这2个文件有关系~~
在这里插入图片描述
好，我们打开这2个文件，分别加一句话，就ok了~~
在这里插入图片描述
在这里插入图片描述
已经实现测试和发布分离接口请求的需求了，是不是很easy，只要加BASE_API这个字符串就搞定！！

在浏览器中配置vue请求后端的接口地址
ithongchou的博客
03-16 263
在 Vue 项目中，如果想要优先使用在浏览器中配置的baseURL（例如通过。
基于Vue+Java实现的在线聊天APP系统设计与实现
m0_67393827的博客
03-06 4489
一、需求分析 1.核心用户分析 在线聊天系统主要针对一些年轻用户群体以及因为工作需求而对于实时交流以及非实时交流有较大需求的群里。就青年群体而言，这一用户群体特征比较鲜明，其主要需求为基础聊天需求以及一些能够凸显个性的功能需求。在线聊天对于青年人来说也逐渐成为一种主流的设计方式。年轻人们通过在线交流和好友印象的可以了解到对方的性格，而且可以通过相互添加好友保持关系。而对于有工作需求的人来说能够实时交流以及处理未读消息就显得十分重要。 2. 系统的主要功能的概述 首先未注册的用户可以注册账号，已经注册的用户可
cli3设置端口号 vue_vue-cli3项目配置不同环境下请求地址的方法
weixin_39651816的博客
12-24 826
一 . 在项目根目录下新建以下三个文件：.env.development(开发环境)，.env.production(生产环境)，.env.test(测试环境)1.1 .env.development内代码如下//开发环境配置NODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_API_URL = 'http://192.168....
vue项目静态资源中配置接口地址
李三丧的博客
06-04 6371
开发过程中，端口变动十分常见，测试和上线后的后端接口大部分就不同，所以将接口地址放到配置文件中是必不可少的。 一、在静态文件夹中新建 config.json文件，文件中存放接口地址等地址配置信息。 例： { "axios": { "baseUrl": { "desc": "说明：后端数据接口基地址", "value": "http://****.232:...
Vue项目 测试、发布root地址配置
geanwen的博客
03-13 5743
说明基本上所有的项目，在测试的时候和正式发布的时候根地址是不一样的; 测试环境连接测试后台方便测试; 正式环境连接正式后台地址，这已经不是新鲜的事了; 原来我们是手动去修改地址，在每次切换环境的时候; 下面说说VUE项目中怎样将测试环境和正式的地址提前配置好，防止忘记修改地址导致发布失败;利用的WebPack给生产环境和正式环境配置不同地址项目目录中有配置文件夹; 里面找到prod.env.js文...
vue项目 封装request请求（动态区分两个请求地址）
蓝胖子的博客
06-21 3767
vue项目 封装request请求（动态区分两个请求地址）
webpack线上和线下请求地址有什么不同？
Menqq的博客
03-01 571
不知道小伙伴们面试的时候有没有被问到过：线上和线下请求地址又什么不同？或者是，你开发的时候请求地址是线上测试还是线下测试？？？ 区别就在于它们的代理地址。 线下测试 127.0.0.1就是线下测试也就是本地测试； 再有呢也可以就是你们公司的局域网：192.168.1.123（这个呢是你们公司局域网的IP），这是线下测试； 线上测试 就是，你代理的地址不就是IP地址了，有可能是一个远程地址，长得像118.89.234.135这样，有可能还会是一个域名。这些属于线上测试； 当然真正开发的时候真正上线的时候肯定是
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
shuux666的博客
03-03 897
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
vue总结
Lee__603的博客
07-29 562
这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。2.多态父类型的引用指向子类型的对象，不同类型的对象针对相同方法，产生了不同的行为。8.介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景。...
【Vue CLI 3新纪元】：移动前端适配技术的革新与实战指南
![【Vue CLI 3新纪元】：移动前端适配技术的革新与实战指南]...本文介绍了Vue CLI 3的安装、配置和核心特性，并探讨了移动端适配技术和Vue CLI 3在实战项目中的应用。通
vue+webpack获取IP地址-两种方案（各有不同）
qq_37552042的博客
08-20 2255
第一种方案(传统方案-获取局域网的IP) 找到config文件夹下面的index.js中 修改如箭头把下面的粘贴到文件里面 第一步：在config- index.jsz中 添加以下代码 // 定义自动获取本地ip的方法开始 const os = require('os'); function getNetworkIp() { let needHost = ''; // 打开的host try { // 获得网络接口列表 let network = os.networkI..
vue项目如何区分开发、生产和测试环境
热门推荐
厚渡
03-31 1万+
在vue项目的日常开发中， 区分开发、测试和生产环境极其重要， 如果不区分就很容易弄混。 该如何区分呢？ 第一步 在项目根目录， 注意是项目根目录， 跟vue.config.js、src文件夹同级。 文件： .env.production NODE_ENV = "productionDwp" VUE_APP_TITLE = "productionVUE_APP_TITLEDwp" 文件： .env.test NODE_ENV = "productionDwp" VUE_APP_TITLE = "t
react项目webpack4配置正式环境接口地址和测试环境接口地址
全栈攻略
09-24 1万+
react官方脚手架创建的项目默认是隐藏webpack的配置的，我们要配置不同环境的不同通用请求接口地址，就要暴露webpack配置，执行命令 npm run eject 执行完之后，就会多c出下面几个文件 找到scripts目录下的build.js ,这个文件默认打包构建的正式环境的 复制一份build.js,并命名为testBuild.js,这个是我们配置为打包构建测试环境，并且把no...
webpack配置接口路径
weixin_34332905的博客
04-27 478
比如在webpack.config.js中的plugins中加入 new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), IS_SIGN: JSON.stringify('prodsign') }),...
webpack-dev-server代理请求配置
韩大璐
02-24 2645
在做项目的过程中，本地请求地址和线上请求地址有的时候会有一些出入。 为了避免在项目上线之后要改动很多请求地址，我们使用webpack-dev-server统一做一个代理。 本地mock数据在 /static/mock/ 这个路径下 想要访问 /static/mock/index.json，我们的路径就应该写成 axios.get('/static/mock/index.json') 但如果在线...
Vue2接口地址配置(webpack)
侞婼冇罪
06-16 4258
找到文件 开发环境配置如下： 生产配置： 使用方法： axios.defaults.baseURL = process.env.API;
webpack实现开发、测试、生产等环境的打包切换
Joy_qxz的博客
03-09 9943
        使用webpack构建的工程，在开发过程中不同环境的配置不同，在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦，本文简单介绍如何通过对webpack进行配置，实现不同环境打包分类配置；            1.修改build文件夹下build.js文件                添加声明变量                 修改前...
前端 webpack 打包环境配置，根据指令适配请求地址
chenlincc的博客
05-19 870
下载cross-env npm install --save-dev cross-env 这里我们假如有两个地址， 测试： “http://127.0.0.1:9000/ops/” 开发： “http://127.0.0.1:9000/opsdev/ //在package.json里面编辑 //这里是在umi上，其它环境也类似配置 { "scripts":{ "build":"umi...
vue开发中api接口地址区分开发环境和线上环境
Mr.Yuan
08-14 1万+
相关文件 /config/dev.env.js // 本地开发配置 /config/prod.env.js // 线上打包配置 修改/config下的dev.env.js和prod.env.js这两个文件 dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = re...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泠泠在路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值