前端开发修改本地项目的访问域名 替换localhost为xxx

本文介绍如何将VUE项目的本地访问地址从http://localhost:8080更改为http://jay.com:8080。通过编辑hosts文件并进行一系列操作,实现自定义域名的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求: VUE的项目本来是 http://localhost:8080 才能访问的,现在想改成  http://jay.com:8080 就能访问。

操作步骤

打开如下图的目录:

按照这个路径找到hosts文件,右键打开方式使用记事本打开,在localhost下面加上想要的任意域名。

 

因为不能直接保存,所以需要全选复制hosts文件的内容,新建一个txt文件,粘贴到里面,然后强制删除hosts文件,再将新建的文本文档重命名为hosts,并删掉.txt后缀。

 

### Vue项目中网络请求显示`localhost`而非IP地址的解决方案 在开发环境中,Vue项目的默认配置通常会将API请求指向`localhost`。然而,在某些情况下(例如跨设备调试或部署到服务器),可能需要更改此行为以使请求指向特定的IP地址。 #### 修改Vue CLI中的代理设置 如果使用的是Vue CLI工具链,则可以在`vue.config.js`文件中定义代理规则来修改请求的目标地址。通过这种方式可以指定实际的IP地址而不是`localhost`作为目标主机[^1]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://<your-ip-address>:port', // 替换为实际的IP地址和端口 changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 上述代码片段展示了如何重新定向所有的`/api`路径下的请求至指定的IP地址和服务端口号上。 #### 使用环境变量自定义基础URL 另一种方法是利用`.env`文件来自定义不同环境下使用的API基础URL。这允许开发者轻松切换生产与开发模式下所访问的服务地址[^2]: - 创建或者编辑位于项目根目录下的`.env.development`文件并加入如下内容: ```bash VUE_APP_BASE_API=http://<your-ip-address>:port/api/ ``` 接着,在前端发起HTTP请求时可以通过读取这个环境变量构建完整的请求链接: ```javascript const axiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API || '/api', }); ``` 这样做的好处在于无需每次调整源码即可适应不同的运行场景需求。 #### 调整Nginx反向代理配置支持外部访问 当应用已经部署完毕但仍希望保留原有的基于路径区分前后端逻辑的功能时,可考虑优化现有的Nginx配置使其能够接受来自公网或者其他局域网内的连接尝试。确保防火墙开放相应端口,并更新站点配置文件如下面例子所示: ```nginx server { listen 80; server_name your-domain-or-ip; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://backend_server_ip_or_hostname/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ``` 以上配置示例说明了怎样让Nginx识别带有`/api`前缀的请求并将它们转发给后台服务处理程序。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刺心疯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值