vue项目如何让局域网ip访问配置设置

 更新时间:2022年09月05日 12:02:53   作者:狂野小青年  
这篇文章主要介绍了vue项目如何让局域网ip访问配置设置,具有很好的参考价值,希望对大家有所帮助。

vue让局域网ip访问配置设置

在开发中,为了让同一局域网的小伙伴,都可以通过IP地址访问到vue-cli搭建的项目,要怎么配置呢?

第一步:修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’

第二步:检查 package.json 文件里进行配置,scripts.dev配置是否设置 host为‘0.0.0.0’

这里我要强调下,第一步和第二步都有ip,其实第二步优先级高,这里第二步的host可以不设置,vue默认执行第一步的设置。

这个ip也可以设置成你的局域网ip,例如:192.168.1.182

第三步:查看开发机的ip地址,并告诉给其他小伙伴,别忘了端口

第四步:如果通过IP还不能访问,最好是关闭开发机的防火墙,如果你不怕麻烦也可添加放行端口

vue局域网使用ip无法访问的解决

搜到了很多解决方法,但是,尝试到这个才能用

版本:

[root@localhost vue_time]# vue --version
2.9.6

[root@localhost vue_time]# node -v
v15.5.1

只要在项目的目录下,找到package.json 在script模块下,dev项中,增加一个启动配置参数 --host 0.0.0.0即可,下面是增加了之后的

[root@localhost vue_time]# cat package.json 
{
  "name": "vue_time",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中的严格模式如何取消

    vue中的严格模式如何取消

    这篇文章主要介绍了vue中的严格模式如何取消,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    这篇文章主要介绍了vue使用iview的modal弹窗嵌套modal出现格式错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue项目中使用addRoutes出现问题的解决方法

    Vue项目中使用addRoutes出现问题的解决方法

    大家应该都知道可以通过vue-router官方提供的一个api-->addRoutes可以实现路由添加的功能,事实上就也就实现了用户权限,这篇文章主要给大家介绍了关于Vue项目中使用addRoutes出现问题的解决方法,需要的朋友可以参考下
    2021-08-08
  • 手把手教你Vue3 按需引入 Echarts的过程(收藏)

    手把手教你Vue3 按需引入 Echarts的过程(收藏)

    新项目采用 Vue3 作为前端项目框架,避免不了要使用 echarts,但是在使用的时候,出现了与 Vue2 使用不一样的地方,所以特别记下来,希望给到有需要的同学一些帮助
    2023-10-10
  • vue 动态创建组件的两种方法

    vue 动态创建组件的两种方法

    这篇文章主要介绍了vue 动态创建组件的两种方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • 详解Element-ui NavMenu子菜单使用递归生成时使用报错

    详解Element-ui NavMenu子菜单使用递归生成时使用报错

    这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue项目debugger调试看不到源码的问题及解决

    vue项目debugger调试看不到源码的问题及解决

    这篇文章主要介绍了vue项目debugger调试看不到源码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3添加模式配置多环境变量的方法

    这篇文章主要介绍了vue-cli3添加模式配置多环境变量的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 基于vue3实现一个抽奖小项目

    基于vue3实现一个抽奖小项目

    在公司年会期间我做了个抽奖小项目,非常棒,今天把他分享到脚本之家平台,供大家学习参考,对vue3实现抽奖小项目感兴趣的朋友一起看看吧
    2023-01-01
  • Vue2.0 实现单选互斥的方法

    Vue2.0 实现单选互斥的方法

    本篇文章主要介绍了Vue2.0 实现单选互斥的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论