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

目录
  • vue让局域网ip访问配置设置
  • 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"
  },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目通过network的ip地址访问注意事项及说明

    Vue项目通过network的ip地址访问注意事项及说明

    目录 Vue通过network的ip地址访问 在使用network进行局域网访问时注意 vue项目Network: unavailable的解决 解决办法 Vue通过network的ip地址访问 在config.js文件中的dev中修改host为0.0.0.0  devServer: { // 环境配置         host: '0.0.0.0',         port: 8080,         https: false,         hotOnly: false,      

  • 完美解决通过IP地址访问VUE项目的问题

    第一步 1.将config里面的host设置成0.0.0.0 host: '0.0.0.0', 2.修改package.json "scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", } 第一步和第二步都有ip,其

  • vue中如何获取本地IP地址

    vue中如何获取本地IP地址

    目录 获取本地IP地址 1.在浏览器中 2.在vue文件中,实现如下 获取本地内网IP 获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的: http://pv.sohu.com/cityjson?ie=utf-8 1.在浏览器中 直接输入这个地址,就可以获取到ip信息: 2.在vue文件中,实现如下 (1)在config/index.js中 proxyTable:{ } ,在里面添加代理规则 '/api': { target:

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

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

    目录 vue让局域网ip访问配置设置 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,其实第二步优先级高,这里第二步的ho

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me

  • vue项目移动端实现ip输入框问题

    vue框架移动端做ip输入框组件,input在浏览器和微信端兼容问题. 要求:只能输入数字,输入数字以外的字符(包括点.冒号等数字符号)时自动跳到下一段ip输入框. type=number类型,不会禁止点的输入.手动过滤拿不到包括点字符的字符串.而且输入多个点之后,拿到的值为空. 解决办法:type=tel,只能输入数字,且可以获取到点字符的输入 问题:微信下keyup事件无效,回调事件中event.keyCode返回全是229. 解决办法:监听input事件,event事件对象中keycode

  • Windows Server 2008 R2通过IP安全策略阻止某个IP访问的设置方法

    Windows Server 2008 R2通过IP安全策略阻止某个IP访问的设置方法

    现在购买的服务器的朋友会发现,稍微新点的硬盘已经不支持win2003系统了,主要是驱动人家都不给你弄了,再加上微软对2003的安全也不提供支持,以后很难有补丁了.推荐大家使用2008 r2的系统了,对于动辄32G/64G的服务器,跑2003真的很浪费了. 下面我们小编就为大家分享一下具体的方法,最后有好东西提供: 一. 打开本地安全策略 1.在"开始"-"运行"输入"secpol.msc"回车即打开"本地安全策略"页面,见图1

  • vue项目总结之文件夹结构配置详解

    vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • 部属vue项目,访问路径设置非根,显示白屏的解决方案

    部属vue项目,访问路径设置非根,显示白屏的解决方案

    目录 vue访问路径设置非根显示白屏 解决 vue部署到非根目录设置 需要修改三处配置 vue访问路径设置非根显示白屏 问题: 访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.” 环境: 使用nginx部属vue项目时,没有把访问项目设置为根路径 说明: 当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在

随机推荐