VUE2.0 脚手架搭建项目,如何配置本地IP地址访问项目,详解

VUE2.0 脚手架搭建项目,如何配置本地IP地址访问项目,详解!

前言:后端同事想访问我VUE本地项目进行自测,然后我就进行了一系列配置
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.配置完之后重启项目,你就会发现打开的http://0.0.0.0:8080是个空白网页,并没有打开IP地址或者localhost
别慌我们接着整
**4.出现上面这种情况之后,我们还需要配置一下build文件夹下面的webpack.dev.conf.js文件

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

**5.最后配置一下启动项目 通过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.最后看下一结果
在这里插入图片描述

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值