webpack-dev-server 相对路径问题

问题起源

项目开发过程中(React 官方脚手架生成的工程),有一个显著的问题:每次打包部署到服务器后,有时候发现 post 或 get 请求后方的地址不正确。原因很明显:开发过程中连接的后台可能和实际部署的后台地址不一样,大部分情况下,可能本地开发时,js 请求数据时服务器地址是localhost或者127.0.0.1诸如此类,而实际打包并部署到服务器上后,可能访问的是10.1.1.1之类的其他地址。
    所以有时候匆忙打包并且部署后发现不对又得重新打包一次。没啥必要,而且这时候我想起来 springboot 就可以使用外面的配置文件进行运行环境的调整。
    与此同时,也有一个困扰我的问题,有时候存在测试代码和生产代码冲突的问题。比如我要登录环境,那么测试状态下可能我可以直接省略判断密码的步骤直接进入,而实际打包测试的时候肯定不能忽略这些步骤。又如测试状态下可能会log好多信息,但是生产环境下必然要尽量少一些甚至没有,但是实际打包测试的时候,由于看不到过程日志,调试有时候可能不是很方便。于是我想着有什么可以整体控制调试模式的方法。
    由于想到springboot根据包外的配置方式,联想到可以使用一个全局的变量来控制这些关键变量,并且在总入口文件的最前方先引用一个global全局配置。。。哇,说到这里我感觉好智障,我完全可以放到index.html进行初始化啊。。。没啥子必要放到一个单独的模块里啊喂。

解决思路

    现在想起来我的方式有点误入歧途了。。蠢兮兮。不过还是记录一下叭,我先在index.html中引入一个global.js的全局配置文件,然后在前端工程中,使用一个consts或其他的模块,优先导出global中的变量:

// const.js
let globalV = {mode: 'test'}
if (window.$myGlobalV) {
	globalV = Object.assign({}, globalV, window.$myGlobalV);
}
window.$myGlobalV=globalV;
export default globalV

    之后再模块化工程中使用其他模块直接引用上面的consts模块即可。这样在打包后如果只是地址不对或者想要直接调试内容,直接更改全局的控制变量:window.$myGlobalV即可。

遇到的问题

    由于使用的是webpack-dev-server作为开发服务器,发现实际上载index.html中通过相对路径引入的global.js不能被正确加载,后来翻看webpack-dev-server的描述文件时发现人家好像说不支持在入口文件中使用相对路径引入??嗯呐,先这么记下了!

总结

    啊呀,我闲着没事写这个记录的时候才想起来完全可以在index.html入口文件中直接声明全局变量参数啊!!!哪里需要引入global.js!反正变量也不会很多。QaQ

你可能感兴趣的:(全局变量,前端,单页应用)