使用devServer.proxy进行域名转发

哈哈,框架搭完了,不写下来心里总感觉空空的。。。
所以还是为了完善框架而来!!!

1. 目的

为了让环境和域名的对应

2. 尝试

config.js已经建好,里面存放所有的环境域名。


环境域名

(1)方法一:设置全局变量

  • 运行时 后面加个-- dev/qa/pl,用process.env.argv来获取最后一个参数,与文件域名进行匹配,就可以拿到当前环境域名。
  • 因为webpack.config.js不能导出或导入,而这个环境域名需要在request里面和url拼接,因此只能准备将这个环境域名设置成全局变量,再在request里直接用就行。
    问题:经查找,webpack提供一个设置全局变量的,在fetch请求处将域名添加在url前面,运行代码后,发现请求成功了,但是没有返回数据,所以这是跨域的问题。。因此,pc端还是建议用代理转发域名吧!!!
    webpack的全局变量用法如下:
    DefinePlugin用法

    之前一直不成功是因为把eslint打开了,全局变量当然没有定义,所以编译不通过,这个变量就一直没有生效,最后关掉eslint的no-undef: 0就行了,全局变量还是可以拿到的。

(2)方法二:使用代理proxy
经查文档,在开发环境中,有一个devServer.proxy提供代理并转发域名,因此在webpack.config.js这样配置:



知道其用法就行,这只是一个demo例子。proxy会将本地域名代理成环境域名(本地运行看到的还是本地域名,看不到代理到的那个环境域名,不过应该会代理成功的,到时候在项目中实践看看— _ —)。

拓展:

package.json里面运行scripts,可以随便添加环境域名,一般都是大写,即可生效,相当于定义变量使用。因为使用了babel-preset-react-app指定NODE_ENV的值为“development | test | production”,不可以随意改变,因此,只能重新定义一个API_ENV来获取运行环境,目的改变域名。

最后,再安利一个链接一篇就让你学会webpack4,翻译不错,可以看看。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,969评论 19 139
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,733评论 0 16
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,324评论 4 31
  • 一、webpack的基本概念 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个...
    cilla123阅读 1,577评论 0 8
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110