使用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构建的本地服务环境,在手机上访问调试的更多相关文章

  1. vue 项目使用 webpack 构建自动获取电脑ip地址

    1.开发 H5 时移动端,经常会使用真机进行调试本地环境.webpack 配置服务器好多脚手架写的都是固定的,而在团队开发中需要每人配置自己的本机 ip 进行开发,每次开启开发环境的都需要修改,并且还 ...

  2. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  3. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  4. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  5. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

  6. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  7. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  8. 用node搭建本地服务环境

    const express = require('express'); const path = require('path'); const request = require('request') ...

  9. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

随机推荐

  1. jmeter分布式测试教程和远程的代理机无法连接网络的问题解决方法

    一.Jmeter分布式执行原理: 1.Jmeter分布式测试时,选择其中一台作为控制机(Controller),其它机器做为代理机(Agent). 2.执行时,Controller会把脚本发送到每台A ...

  2. Java位运算原理及使用讲解

    前言日常开发中位运算不是很常用,但是巧妙的使用位运算可以大量减少运行开销,优化算法.举个例子,翻转操作比较常见,比如初始值为1,操作一次变为0,再操作一次变为1.可能的做法是使用三木运算符,判断原始值 ...

  3. Linux initramfs说明

    1.前言 最近在尝试对手头的开发板进行移植,此处记录initramfs挂载的基本流程,记录一下,以备后查.分析时是基于linux3.4.2 2. rootfs的挂载 start_kernel-> ...

  4. Spring Boot 2 + MariaDB + HikariCP基础实例

    在已有SpringBoot工程中基于MariaDB驱动使用HikariCP 连接池 环境:SpringBoot2.0.2 .MariaDB驱动版本2.2.3.HikariCP2.7.8 1.在Spri ...

  5. linux常用基础命令(一)

    Rz命令 rz命令本地上传文件到服务器: rz在弹出的框中选择文件,上传文件 sz命令 sz命令发送文件到本地: Sz文件名 例:将文件file1 Sz file1 Tomcat启动/关闭命令 比如t ...

  6. Django ---- 框架简介

    MVC框架和MTV框架 mvc,全名是 Model View Controller, 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Cont ...

  7. WPF 10天修炼 第七天- WPF资源、样式、控件模板

    WPF资源 对象资源 WPF允许在XAML标记的任意位置定义资源.比如在特定的控件.窗口或应用程序级别定义资源,WPF资源系统提供的对象资源有如下好处: 1.  高效:使用对象资源可以在一个地方定义而 ...

  8. javascript--实现几个简单的操作

    利用JS实现几个简单的功能 --还有省市联动,商品的左右选择,表单的校验.但在学了jQuery之后,感觉这个没那么重要了,就不写了 表格的全选和全不选 表格的动态隔行换色 <!DOCTYPE h ...

  9. 一丶HTML介绍

    import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('local ...

  10. Docker----在Docker中部署Asp.net core2.1以及修改发布

    本篇文章主要是如何在Docker容器中运行ASP.NET Core应用程序,以及修改系统之后,发布更新.本文章采用自定义的Docker文件 系统要求: 1.服务器或本地已经安装docker 一.创建一 ...