通过配置文件实现修改vue域名

Posted 2023-04-13

参考技术A

    我们的前端项目一般在打包时就会将服务器域名或者ip配置好，在打包生成的文件直接部署到对应服务器就行了。但是公司的项目要求可以部署私有云或者局域网内，项目的ip地址可能是动态变化的，或者说不同的局域网内ip不是不同的，因此要实现可以让工程人员去修改访问的服务器ip来做到一次打包多处使用的效果。
    当然，这样做在我们看来是有一定风险的，会暴露出一些东西，存在一定的危险，同样也提供了一定的便捷性（说白了就是，如果不这样实现，现场售后服务人员会骂娘，因为每个项目都要打包一次，领导呢会感觉，‘ _{你个垃圾，就这都不能实现，怎么可能，解释那么多，不就是做不出来，垃圾} ’）。
    综上，我这里对公司项目进行了相关实现，其实挺简单的，如下：

1，在根目录下的public目录中添加config.js文件，内容如下：

项目打包的时候会将该文件拷贝到打包文件的根目录中。
2，配置封装的axios，我的axios封装在request.js文件中，这里我节选了需要添加和修改的地方

3，将config.js文件在index.html文件中引入

修改Host，配置域名访问

虽然我们已经能够通过localhost访问本地网站了，为了提高逼格，我们可以修改host文件，设置一个自己喜欢的域名指向本地网站，岂不是更高大上。

明确需求

通过配置，使得我们能够通过http://a.com访问到本地网站。

修改host

Windows用户在

C:\Windows\System32\drivers\etc

目录下找到名为hosts的文件。由于Windows的自我保护设置，当前文件路径下我们是无法修改的。所以,移动hosts文件到桌面，用记事本打开编辑。 在类似

#    127.0.0.1       localhost

这样一行的代码下添加一行：

    127.0.0.1       a.com

保存文件，然后再移动hosts文件到

    C:\Windows\System32\drivers\etc

文件夹下。然后我们访问：http://a.com 就可以打开我们自己的网站了。

总结

当然你也可以把 诸如 baidu.com或者jd.com 这样的域名指向本地来访问。不过这样做，你想要访问真正的百度就不方便了。

知识点

把一个域名指向本机也就是127.0.0.1，这样我们就可以通过域名来访问本机提供的web服务了。同理，我们在浏览器地址栏输入127.0.0.1也同样访问的是本地网站。如果你知道本机的局域网IP，通过这个IP同样可以访问到本地网站。 本步骤意在加深对域名，服务器的理解。