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

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

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

目录
相关文章
|
4月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
215 13
|
7月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
424 83
|
8月前
|
JavaScript 前端开发 算法
vue和react 哪个更强大
vue和react 哪个更强大
220 3
|
12月前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
390 61
|
12月前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
630 58
|
12月前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
1055 58
|
12月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
298 1
|
12月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
12月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
297 0