vue2 启动如何配置本机ip地址

原创已于 2023-01-03 15:49:20 修改 · 3.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#tcp/ip #网络 #服务器

于 2022-11-11 09:06:17 首次发布

vue的一些使用技巧专栏收录该内容

30 篇文章

订阅专栏

本文档指导如何修改配置文件使项目能在本地和网络中通过0.0.0.0访问。主要步骤包括：1) 修改config/index.js，将localhost替换为0.0.0.0；2) 在package.json的dev命令后添加--host 0.0.0.0；3) 更新webpack.dev.conf.js，设置useLocalIp为true；4) 配置webpack.dev.conf.js的 FriendlyErrorsPlugin，添加本地和网络访问地址。完成以上步骤后，项目即可通过localhost和本地IP地址访问。

1..首先找到config文件夹目录下的 index.js文件

// Various Dev Server settings
    //host: 'localhost' 
    //将localhost进行替换成 0.0.0.0
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be de

2.找到package.json配置文件

//在这句代码后面添加 --host 0.0.0.0" 如下
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"",

3.出现上面这种情况之后，我们还需要配置一下build文件夹下面的webpack.dev.conf.js文件

devServer: {
    useLocalIp: true, //将useLoackIp设置为true 就可以了
    }

4.最后配置一下启动项目通过localhost 和本地ip地址访问同样还是在build文件夹下面的webpack.dev.conf.js文件找到

devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [ //下面两个地方，直接复制即可
            `App runing at: `,
            ` - Local: http://localhost:${port}`, //配置这里
            ` - Network: http://${require('ip').address()}:${port}`,//配置这里
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

5.最后运行看页面