| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> React、Vue项目build打包编译后如何再修改后台请求地址 -> 正文阅读 |
|
[JavaScript知识库]React、Vue项目build打包编译后如何再修改后台请求地址 |
其实这个问题,我们也可以将它改成,vue/react项目打包编译后如何再修改其配置。 打包之后的项目目录如上是一个静态网页。 当我们如果想直接修改js的某个变量的话,打开js 我们会发现项目已经被编译为普通的js,我们甚至连文件都找不到。 而里面的内容也被webpack编译为其它字符,找不到我们所要改的那个变量。 ? ?这时候怎么办呢?其实聪明的伙伴估计已经想到了。那就是让内容直接去读取第三方存储。 例如:localStorage,cookies或者某个json文件等。 也就是说,不管我们编译不编译,我们都让代码去读取第三方存储,获取我们的配置。这点我们其实经常碰到。就比如项目的某个配置文件。 那么怎么做呢? 1. 我们需要新建一个文件,放置在项目的public文件夹中,因为vue项目打包编译的时候,默认这个文件是不会被编译的。(如果你们有单独设置了webpack的编译则另说) 类似于我在当前页面创建一个文件叫:config.js文件 ?这个文件中,我们声明导出一个接口地址,并将它挂载在window之上。 ?下来我们需要在全局的index.html 中引入这个js文件。 众所周知,public下的index.html就是当前vue项目的主html文件。所以我们的目标就是在项目每次打开的时候去运行这个js,将接口写入window之上。 ?这样的话,我们在每次打开这个项目的时候,都会去先执行config.js这个文件,读取文件配置然后挂载在window属性值上。 剩下的就是简单了。 在全局配置請求地址的地方引入window.myURL.URL 即可。 ?这样,我们就完成了项目的配置,我们先将config.js文件改成 ?然后使用 npm run build 进行编译打包后上线部署。这时候我们打开项目在控制台上获取下window看看配置文件地址是否生效。 ?结果是生效的。 当我们再次修改接口地址为当前最新地址。我们再次尝试。 ?同样也是成功的。而这时候接口地址也走向了最新地址。 我们也可以在控制台的 network中看到。 页面一打开后第一时间加载了 config 改变了全局的接口地址。 以上就是我们项目打包后如何再次修改请求接口的方法。 同时借用这个方法,我们也可以做项目配置。例如:控制文件上传大小,等操作。都是类似的操作。? |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/11 17:38:43- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |