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将不可访问，必须也使用这个ip，局域网也是一样用此ip访问

以上这篇webpack vue项目开发环境局域网访问方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解基于webpack和vue.js搭建开发环境
  • webpack构建vue项目的详细教程（配置篇）
  • 浅谈vue+webpack项目调试方法步骤
  • vue+node+webpack环境搭建教程
  • vue-cli webpack 开发环境跨域详解
赞 (0)

相关推荐

  • 详解基于webpack和vue.js搭建开发环境

    详解基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理--不忍直视 2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的-- 3.数据的渲染使用模板引擎,

  • vue+node+webpack环境搭建教程

    vue+node+webpack环境搭建教程

    一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图

  • webpack构建vue项目的详细教程（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

  • vue-cli webpack 开发环境跨域详解

    edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题, 通常会使用Jsonp,但是jsonp只能是get请求. 或者使用CORS支持,设置Access-Control-Allow-Origin: * 0 前置技能 熟悉vue-loader 和 webpack  1 基本配置 编辑confix/index.js文件 dev

  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候. 从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说. -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件

  • 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 项目分环境打包的方法示例

    Vue 项目分环境打包的方法示例

    我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 1.package.json 在build下面添加一个test运行命令 "test": "node build/build.js" 2.prod.env.js 在config -> prod.env.js 中修改代码 'use strict' // 读取系统运行时候的变量 con

  • 使用webpack搭建react开发环境的方法

    1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新

  • vue项目配置同一局域网可使用ip访问的操作

    1.检查 package.json文件,scripts.dev设置 host改成 "0.0.0.0" 2.config文件中找到 index.js 文件的host改成 "0.0.0.0" 此处的"0.0.0.0"可以改成自己的ip,重启项目就可以了 补充知识:@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug,用

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    vue.js开发环境搭建教程分享,具体内容如下 1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装... 2).输入:vue -V,回车,若出现vue信息说明表

  • node vue项目开发之前后端分离实战记录

    前言 本文主要介绍了关于node vue前后端分离的相关资料,分享出来供大家参考学习,下面随着小编来一起学习学习吧. node vue项目开发 最近看了近一周的vue开发,有诸多感触,我之前接触过react.angular所以特别想学学久仰大名的vue.学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令,vue组件化设计类似于react的组件化设计,包括一些router的设置跟react里的路由或者nodejs里的路由都差不多,vuex更是根据

随机推荐