vue项目使用webpack构建的本地服务环境,在手机上访问调试
使用vue脚手架构建的项目,一般在本地localhost运行,配合浏览器的模拟调试工具开发。
如果想看真机环境,又不想build到线上。
webpack能配置电脑本地内网环境指向公网访问的!
1、打开项目的package.json文件,修改里面的script里面的dev
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.100",//就是在原有的基础上在后面加上了 --host就是自己的电脑IP;"start": "npm run dev",
"build": "node build/build.js"
},
#可以打开cmd控制台,输入ipconfig,查看自己的电脑ip;
2、修改好了之后本地电脑访问要把之前网址的localhost换成自己的电脑ip地址;
在config文件里面修改
host: 'localhost', // 把这个也改为你电脑的ip 例:192.168.0.100
port: ,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
3、关闭自己的电脑防火墙;
如果不关防火墙,访问不了(#控制面板-->系统和安全-->window防火墙-->)
4、重新启动该项目;
手机上访问你电脑ip,端口号不要忘了加!
编译器修改后 手机上同样也会及时同步的,
更新:vue-cli3.0+ 自带了这个功能
vue项目使用webpack构建的本地服务环境,在手机上访问调试的更多相关文章
- vue 项目使用 webpack 构建自动获取电脑ip地址
1.开发 H5 时移动端,经常会使用真机进行调试本地环境.webpack 配置服务器好多脚手架写的都是固定的,而在团队开发中需要每人配置自己的本机 ip 进行开发,每次开启开发环境的都需要修改,并且还 ...
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- 用node搭建本地服务环境
const express = require('express'); const path = require('path'); const request = require('request') ...
- vue项目,webpack中配置src路径别名及使用
1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...
随机推荐
- Ubuntu下使用Sublime Text 3配置Python开发环境
因为电脑配置有些低端,所以只能使用Sublime来当作Python的IDE. 1.下载Sublime Text 3并安装 首先去官网找到64位的.tar.bz2的压缩文件下载: 使用命令或归档管理器将 ...
- Python学习笔记-CGI编程(如何在IIS上挂Python开发的Webservice)
一.如何用Python开发一个简单的Webservice 利用python的cgi编程,可以传入参数将结果输出. 定义需要编码以及需要引用的模块 #conding=utf-8 #修正中文乱码 impo ...
- Revit二次钢筋
- eclipse新建工作空间后的常用设置
1.设置字体 一般主要设置下面三个地方(其他可以按需进行设置): Window->Preferences->(可以直接搜索font)General -> Appearance -&g ...
- 手动安装sublime text3 文本编辑器是控制台
1 本来想安装一个体积小.功能又强大的文本编辑器,百度了一圈sublime text3 的口碑不错,然后就安装试试吧, 下了以后安装成功后,看到介绍sublime text3功能强大是因为他可以安装多 ...
- shell echo/read/printf/流程控制章节笔记
// echo read printf 流程控制 命令 1.read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量 read hello 输入xxx echo $hell ...
- iOS UINavigationController Class Translation
类 UINavigationController 一个容器视图控制器,定义了用于导航分层内容的基于堆栈的方案. 概述 导航控制器是一个在导航界面中,管理一个或多个子视图控制器的容器视图控制 ...
- 安装Spotlight On Unix监控Linux
1.安装Spotlight 一步一步按提示安装即可- 2.安装sysstat 在Linux上,必须安装sysstat包,用户才可以获取详细的磁盘I/O信息. 执行 rpm -qa |grep syss ...
- STM32的定时器定时时间计算(计数时间和中断定时时间)
时基单元 可编程高级控制定时器的主要部分是一个16位计数器和与其相关的自动装载寄存器.这个计数器可以向上计数.向下计数或者向上向下双向计数.此计数器时钟由预分频器分频得到. 计数器.自动装载寄存器和预 ...
- 末学者笔记--NTP服务和DNS服务
NTP时间服务器 一.概念: 作用:ntp主要是用于对计算机的时间同步管理操作. 时间是对服务器来说是很重要的,一般很多网站都需要读取服务器时间来记录相关信息,如果时间不准,则可能造成很大的影响. 二 ...