Vue 项目运行时，为什么浏览器打开的网址不是 http://localhost:8080 而是 http://0.0.0.0:8080？-css教程-PHP中文网

Vue 项目运行时，为什么浏览器打开的网址不是 http://localhost:8080 而是 http://0.0.0.0:8080？

心靈之曲

发布： 2024-11-11 15:36:01

原创

1220人浏览过

vue 项目运行时，为什么浏览器打开的网址不是 http://localhost:8080 而是 http://0.0.0.0:8080？

vue 项目自动打开浏览器时出现问题

在使用 vue 时，希望项目能够在运行时自动打开浏览器，却发现打开的网址不是预期的 http://localhost:8080，而是 http://0.0.0.0:8080。下面将针对这个问题提供解决方案。

问题分析：

根据提供的代码片段，在使用 vue cli 创建项目时没有指定额外的配置选项。默认情况下，项目将启动一个本地服务器，其主机地址为 0.0.0.0。这会导致浏览器打开时显示不期望的网址。

解决方案 1：修改 devserver.host

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

在项目根目录的 vue.config.js 文件中，修改 devserver 配置的 host 属性。将 0.0.0.0 替换为 localhost。

// vue.config.js
module.exports = {
  devserver: {
    host: 'localhost',
    port: 8080,
  },
};

登录后复制

解决方案 2：使用 --host 参数

在使用 serve 命令运行项目时，可以添加 --host 参数来指定主机地址。例如：

vue-cli-service serve --host localhost

登录后复制

补充：

需要注意的是，使用 0.0.0.0 作为主机地址从本质上来说与使用 localhost 是等价的。它们都将使浏览器打开本地服务器。但是，为了明确起见，修改 devserver.host 或使用 --host 参数指定 localhost 可以确保浏览器打开的网址与预期一致。

以上就是Vue 项目运行时，为什么浏览器打开的网址不是 http://localhost:8080 而是 http://0.0.0.0:8080？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：