在Vue开发环境下,如何实现域名访问?

在Vue开发环境中,通常应用只能通过localhost在本机访问。但有时需要从外网通过域名测试应用。要实现这一需求,可以在vue.config.js文件中修改devServer配置,将`public`字段设置为你的域名,如`public: 'www.mydomain.com'`,并保持`port`与原先一致。重启服务器后,应用即可通过指定域名访问。

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

在使用Vue开发时,开发环境一般都使用本机访问。开发环境下,当运行“npm run serve”命令后, 在命令行窗口会显示如下信息:

App running at:

  • Local: http://localhost:8081/
  • Network: http://192.168.1.23/

其中Network显示的是本机的内网IP地址。这时即使你的机器有一个公有IP并绑定了域名,如果想从外网通过域名访问你的应用也访问不了。 当然,开发环境原本不鼓励从外网访问, 但偶尔也会有需要从外网访问测试一下。这个时候可以通过更改Vue的配置来实现。在配置文件vue.config.js 中,按下面的例子修改一下。

devServer: {
public: ‘www.mydomain.com’,
port: 8081
}

重新启动开发服务器后,命令行窗口显示如下:

App running at:

  • Local: http://localhost:8081/
  • Network: http://www.mydomain.com/

这样就可以通过域名访问Web应用了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值