vue配置启动后终端显示localhost和ip访问地址

最新推荐文章于 2024-01-08 16:38:51 发布

原创最新推荐文章于 2024-01-08 16:38:51 发布 · 3.3k 阅读

5 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何配置项目以便通过localhost及局域网IP进行访问。主要内容包括：1) 修改config/index.js中的host设置；2) 更新build/webpack.dev.conf.js中的compilationSuccessInfo属性以显示启动后的访问地址。

1、首先设置localhost和本地ip访问
在config文件下的index.js文件中，修改host为：

host: '0.0.0.0',
port: 8080,

2、设置启动后终端显示localhost和network访问地址
修改build文件下webpack.dev.conf.js文件里compilationSuccessInfo的messages属性值

compilationSuccessInfo: {
          // 修改启动后终端显示localhost和network访问地址
          messages: [
            `App runing at: `,
            `Local: http://localhost:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ],
        }