事情还要从一个新的需求说起，上周接了一个需求，后端在群里抛出一个地址，说是接口已经好了，可以用了。然后我就很自然的在浏览器输入这个网址，咦？页面怎么没出来？只有一行代码，是data:{}之类的。问了一下小伙伴，（他一定在嘲笑我～）小伙伴说这是接口的地址。哦～嗯？好像懂了，好吧，还是不懂。于是就查了一下资料。
了解到原来我是把域名和接口地址搞混了。现在前端都是使用的前后端分离策略。就是前端负责渲染静态资源，对于动态资源要去向服务器发送请求，然后渲染出来。上面后端给的地址就是请求数据的地址。而在浏览器中输入的地址，应该是我本地文件的地址。这样就明白了。先把接口地址写好。可是接口地址要写在哪里呢？我看有个config.ts文件，里面定义了axios的baseUrl，那就是这里了。but，里面有好几个环境，我应该在哪个环境下去请求接口呢？这就要看项目是在什么环境下启动的。
在package.json的scripts中,有很多命令，我是用npm run dev启动的，所以会运行dev命令对应的脚本。脚本大概是这个样子的，webpack-dev-server --config ./config/webpack.dev.config.js，不是很懂，就查了一下webpack的官网，原来，运行webpack-dev-server，会启动一个web server,只有在启动了服务器之后，去浏览器请求才会得到响应。后面的就是这个服务器启动时要执行的文件。打开文件，里面有devServer字段和plugins字段。我的理解是devServer定义了域名，也就是在浏览器中输入的地址和端口。plugins根据传进来的环境变量进行了全局环境配置。有了这些字段，运行npm run dev时，就会打开一个窗口，显示出页面，并在需要的时候去向后端发送请求。
既然谈到了接口，域名这些，那就再来聊下localhost/ 127.0.0.1 / 0.0.0.0的区别？ localhost其实是域名，他可以对应很多的ip地址。127.0.0.1 是回环地址，并不是真正的接口，也就是由他发送的消息只会被本机接收。难怪在进行ihost配置的时候都是用0.0.0.0,没有使用过127.0.0.1；0.0.0.0其实也不是真实的地址，但是监听0.0.0.0,就相当于是监听本机所有的ip及端口。所以常用来做代理。
这些点你都get到了吗～
