VUE搭建项目,配置本地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.最后看下一效果
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/131568984