哈哈,框架搭完了,不写下来心里总感觉空空的。。。
所以还是为了完善框架而来!!!
1. 目的
为了让环境和域名的对应
2. 尝试
config.js已经建好,里面存放所有的环境域名。
(1)方法一:设置全局变量
- 运行时 后面加个
-- dev/qa/pl
,用process.env.argv来获取最后一个参数,与文件域名进行匹配,就可以拿到当前环境域名。- 因为webpack.config.js不能导出或导入,而这个环境域名需要在request里面和url拼接,因此只能准备将这个环境域名设置成全局变量,再在request里直接用就行。
问题:经查找,webpack提供一个设置全局变量的,在fetch请求处将域名添加在url前面,运行代码后,发现请求成功了,但是没有返回数据,所以这是跨域的问题。。因此,pc端还是建议用代理转发域名吧!!!
webpack的全局变量用法如下:
之前一直不成功是因为把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,翻译不错,可以看看。