React、Vue项目build打包编译后如何再修改后台请求地址

简介: React、Vue项目build打包编译后如何再修改后台请求地址

vue项目大家都了解,开发用 npm run dev/npm run serve。而要上线则必须是先将项目打包编译 npm run build 之后成为了普通的静态网页才可上线进行部署及发布。同样这时候我们也已经将代码全部写好了。如果说要改里面的某个值或者修改请求地址我们应该怎么办呢?

其实这个问题,我们也可以将它改成,vue/react项目打包编译后如何再修改其配置。
image.png

打包之后的项目目录如上是一个静态网页。

当我们如果想直接修改js的某个变量的话,打开js 我们会发现项目已经被编译为普通的js,我们甚至连文件都找不到。

image.png

而里面的内容也被webpack编译为其它字符,找不到我们所要改的那个变量。

image.png

这时候怎么办呢?其实聪明的伙伴估计已经想到了。那就是让内容直接去读取第三方存储。

例如:localStorage,cookies或者某个json文件等。

也就是说,不管我们编译不编译,我们都让代码去读取第三方存储,获取我们的配置。这点我们其实经常碰到。就比如项目的某个配置文件。

那么怎么做呢?

  1. 我们需要新建一个文件,放置在项目的public文件夹中,因为vue项目打包编译的时候,默认这个文件是不会被编译的。(如果你们有单独设置了webpack的编译则另说)

类似于我在当前页面创建一个文件叫:config.js文件
image.png

这个文件中,我们声明导出一个接口地址,并将它挂载在window之上。

image.png

下来我们需要在全局的index.html 中引入这个js文件。

众所周知,public下的index.html就是当前vue项目的主html文件。所以我们的目标就是在项目每次打开的时候去运行这个js,将接口写入window之上。
image.png

这样的话,我们在每次打开这个项目的时候,都会去先执行config.js这个文件,读取文件配置然后挂载在window属性值上。

剩下的就是简单了。

在全局配置請求地址的地方引入window.myURL.URL 即可。

image.png

这样,我们就完成了项目的配置,我们先将config.js文件改成

image.png

然后使用 npm run build 进行编译打包后上线部署。这时候我们打开项目在控制台上获取下window看看配置文件地址是否生效。

image.png

结果是生效的。

当我们再次修改接口地址为当前最新地址。我们再次尝试。

image.png

同样也是成功的。而这时候接口地址也走向了最新地址。

我们也可以在控制台的 network中看到。

页面一打开后第一时间加载了 config 改变了全局的接口地址。

image.png

以上就是我们项目打包后如何再次修改请求接口的方法。

同时借用这个方法,我们也可以做项目配置。例如:控制文件上传大小,等操作。都是类似的操作。

目录
相关文章
|
3月前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
248 59
|
3月前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
144 57
|
5月前
|
缓存 编解码 JavaScript
理解打包好的vue项目结构dist包
理解打包好的vue项目结构dist包
121 3
|
2月前
|
JavaScript 前端开发
|
2月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
53 6
|
3月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
3月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
140 4
|
3月前
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件,将其内容转化为JSON对象,并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程,并提供了一个封装函数,用于在发起请求前动态生成配置化的URL地址。
90 1
|
3月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
121 6
|
4月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
383 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试