vue本地项目设置通过手机访问】的更多相关文章

最近再用vue写一个移动端的应用,想通过手机访问看看页面效果,于是有了下文. 1.shif+右键打开命令行工具,输入ipconfig,回车,得到电脑的ip 2.找到工作目录下的config文件夹中的index.js,将localhost换为ipv4地址, 3,重新编译项目,命令行运行npm run dev命令开启服务 4.电脑或手机端浏览器地址栏输入ipv+端口号如:192.168.1.148:8080回车即可(要求电脑和手机在同wifi内)…
vue本地项目静态资源管理 统一放在src/static里面css,images,js index.html里面使用重置样式 <link rel="stylesheet" href="static/css/reset.css">     组件里面使用图片 <div><img src="/static/img/img1.jpg"></div> css使用背景图片background: url(/sta…
默认情况下 webpack-dev-server只能通过 localhost 访问 如果需要通过 ip 地址访问,修改 npm 配置文件中的 scripts 属性中对应的启动脚本 例如 start 或 dev 项,在配置项后面添加 --host 192.168.3.136(本地局域网IP地址) "scripts": { "serve:dev": "webpack-dev-server --open --env dev --host 192.168.3.13…
安装好node.js 和 npm 后,配置好路由,且可以在电脑中正常访问页面时, 只要修改我的项目:my-project 下面的config--->index.js--->里面的 host:改为 '0.0.0.0' 重启重新跑项目:npm run dev 跑一遍,即可以在手机中正常访问电脑页面. 注意:必须同在一个局域网,说白了要在同一个路由器网络中使用才行. win+R  ---  输入:cmd 回车  ---  ipconfig  查看ip地址(如:192.168.31.244), 把lo…
使用软件:wamp 一.配置apache的host访问路径 打开下面“wamp\bin\apache\Apache2.4.4\conf\”路径下的httpd.conf文件,然后我希望将“自定义IP”的配置代码放在“D:\wamp\bin\apache\Apache2.4.4\conf\extra\”路径下的httpd-vhosts.conf里面,并让apache访问到,我需要将httpd.conf做如下修改,将框中的代码前的“#”去掉,如下图: 二.配置“自定义IP”和访问文件地址 打开“D:\…
项目需要用手机访问电脑本地网页,从而可以调试项目,对代码的理解的快一点 重点 确保手机和电脑在同一个局域网 可以通过手机开热点电脑连接或者电脑开便携式热点手机连接 确保电脑的防火墙是关闭的 打开apache 我这边由于是php开发,所以采用wamp集成环境 步骤 连接同一个局域网 电脑和手机连接同一个局域网,我采用的是手机开热点 打开apache 打开后进行配置httpd-vhosts.conf # Virtual Hosts # <VirtualHost *:80> ServerName l…
最近调试微信公众号,由于微信授权需要线上正式环境的域名,笔者想把手机公众号网页重定向到PC本地localhost调试. 该方法通过Charles代理转发,适用所有需要域名重定向的场景,例如手机通过在线域名查看pc本地项目,微信开发者工具调试公众号等. 先开启本地服务,如果是vue项目,直接运行 npm start 就好了. 打开Charles(下载地址),点击 Tools > Map Remote,在弹出窗里点击add添加一条重定向规则,如下图: from是你要重定向的域名(生产环境域名/外网域…
正常开发中有时间提测比较麻烦.通常让测试小姐姐连接开发本地开启的服务器访问本地项目(在同一局域网下). 其实一般项目IDE已经实现这些功能例如webstorm和vscode,有时候需要单独配置下. 但是Vue项目在本地开发环境中他们就没办法通过IDE去开启服务器,一般都是是vue-cli脚手架开启服务器的这时候就需要我们做些特别的配置了. 首先需要获取自己的ip,我本人使用mac 在iterm中输入 ifconfig en0 可以拿到自己的IP inet 10.101.2.43 window系统…
0.找到config文件夹下的index.js文件,修改host内容为hots:'0.0.0.0',此时重新运行项目,则其他设备可以通过ip进行访问 1.首先确保电脑防火墙或者杀毒软件关闭,因为大多数情况都是这样造成的 2.接下来再允许80或者一些特殊的端口访问权限 3.点击下一步输入自己想要访问的端口好号 其次,电脑开启热点 然后用手机连接该热点,WIN+R 输入cmd,打开命令行,输入ipconfig查看自己电脑的 IP 地址 最后用手机访问该IP地址下的目录文件,就可以访问了…
> 官网地址:https://ngrok.com/download 步骤(官网基本已经说明了步骤,但还不完善,以下为亲测步骤): 下载并注册账号 打开终端,进入ngrok.zip所在文件夹(方法:输入cd,将指定文件夹拉入终端,回车),输入unzip ngrok.zip进行解压 注意:一定要走终端,不能手动解压 本地配置用户信息: 配置邮箱:./ngrok authtoken 794926872@qq.com 获取并配置token,详见:https://dashboard.ngrok.com/a…
vue打包前的配置: 项目目录下--> config文件夹---> index.js: build:  { assetsPublickPath:  './',   // 设置成相对路径   '/' 改为 './' productionSourceMap: false, // 开发环境默认为true , 打包生产代码前设置为false } vue打包后运行在本地/非服务器端环境的访问路径 PC端: file:///E:/program files/www/index.html#/index 移动…
我们在调试移动端页面,尤其是调试微信页面的时候,会遇到这样的情况,手机连着公司的wifi,开发环境(台式机)插着公司的网线,我们要用手机来访问开发环境下的页面.这个时候,如果网线和wifi是在同一个网段,那么直接在手机访问电脑的ip就可以访问到我们搭在本地的web服务.但是,很多时候,公司的网络并不是这么架设的,wifi和网线不在一个网段,那么,通过上述方法就无法访问到了. 有时候调试必须在手机上进行,在chrome下的模拟无法满足.这时候怎么办呢?之前我采取的是这样的办法,电脑上插一个360w…
1.  电脑需要安装好wamp,我这里用的2.0版本,下载地址   http://pan.baidu.com/s/1jG31hbS   2. 电脑需要有个wifi,我用的360wifi   3. 启动wamp后,在电脑本地可以通过127.0.0.1访问到本地的项目   4. 用手机连接360wifi后,访问内网ip,也就是电脑的ip地址.这时可能会出现403,解决办法如下:   我用的wamp2.0此方法可行   找到Apache下的 httpd.conf 然后查找Directory这个词开头的…
1.nginx的搭建依赖环境 1.1 准备jdk环境 当前最新版本下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 历史版本下载地址: http://www.oracle.com/technetwork/java/javase/archive-139210.html 1.2 解压压缩包 1.3 配置jdk环境变量,打开/etc/profile配置文件,将下面配置拷贝进去 #set java enviro…
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一)  :day02-springcloud(理论篇二)  :day02-springcloud(理论篇三) :day02-springcloud(理论篇四) : day03-springcloud(Hystix,Feign)  :day03-springcloud(Zuul网关) day04-项目搭建…
我们开发项目的时候经常会开发到浏览器版本的网页,这样我们就经常需要用手机连接局域网以方便测试,那么怎么配置服务器文件呢. 1.首先关闭电脑的windows防火墙   右击我的网络/windows防火墙/windows防火墙状态->点击关闭 2.wampsever服务器有两种状态(服务器在线状态和服务器离线状态):点击wampsever服务器切换到服务器在线状态. 3.配置HOST文件:  我的计算机/C磁盘/windows/system32/drivers/etc/HOSTS/ 配置访问路径:…
最近一段时间,都在使用Jquery-Mobile + MVC做手机Web,有一些心得.体会 下面介绍如何拒绝电脑访问手机网站 电脑的浏览器,跟手机的浏览器内核不一样,这是我设置拒绝访问的思路. 下面是我已经封装好了的一个拒绝访问的一个方法 public static class IsMobileDevice { /// <summary> /// 是否为手机访问 /// </summary> /// <param name="strUserAgent"&g…
在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边打包后就不会报路径问题了.(请用起服务的方法来打开打包后的index.html,如anywhere来打开index.html). 当然也可以用express方法,这个就不详说了. vue 构建项目vue-cli vue 构建项目遇到的问题 vue 构建项目 文件引入…
XAMPP 虚拟主机配置,实现多域名访问本地项目 1.首先你既然要配置多个虚拟主机,那你肯定需要多个站点的目录文件.你可以在e盘创建 www文件夹,然后在该文件件中新建两个站点目录,假设test.com和train.com好了. 目录建好了,那你肯定需要配置两个域名来访问改目录吧.打开C盘,这里是你的系统安装盘哦,不是C盘的进你电脑的系统安装盘,找到Windows文件夹——>System32文件夹——>drivers文件夹——>etc文件夹中的hosts.conf文件,用管理员权限打开,…
今天群里有个端友说到了这个,没当回事,devserver中虽然设置了端口,但是启动本地项目后,端口还是随便更换,网上回去初始化了一下项目,结果也遇到这情况了,刚好,我们只需要 npm install portfinder@1.0.21 就可以解决了, 这是又portfinder1.0.22版本导致的,vue-cli-service servey 启动后,服务器随机端口的问题…
一:关于Windows平台安装git以及github的注册不在详细描述,可以参考如下经验: 安装教程:https://jingyan.baidu.com/article/925f8cb8a8e91cc0dce05647.html github注册:https://blog.csdn.net/p10010/article/details/51336332 二:在本地项目完全准备好的情况下: 1:进入项目的主目录,右键git Bash here 进入如下图所示: 2:准备工作已经做好,接下来开始吧本…
我用的Wampserver2.4-x64 1. 先确保你的手机和电脑连在同一个局域网内. 2. Window + R, 然后输入 ipconfig,然后获取ip地址, 长这样: 192.168.XX.XX 3. 手机浏览器里输入这个地址: http://192.168.XX.XX:8080, it works 如果要真正修改访问路径,而不用默认的www,我们应该怎么改呢?很简单,打开httpd.conf,寻找“DocumentRoot”大概在第178行,把后面的值改成我们实际网站需要的路径(如:…
1. 概述 1.1 说明 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目.GitHub地址是:https://github.com/vuejs/vue-cli. 2. 搭建 2.1 node环境 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功   2.2 安装vue-cli 安装好了 node,就可以直接…
最近一直在做项目,发布部署的事情都是同事或者老大做的,无奈什么事都要自己尝试经历后才能记住,所以发布的事情轮到我了,由于是第一次发布部署项目到一个新的服务器环境,难免会遇到各种各样的问题,总结下来,希望可以帮到需要的人. 项目框架使用的是vue+.netCore2.2所以发布的时候需要前后端分开发布,遇到的问题是挺多的,不过对自己来说也算是一种经历吧. 一..netCore 项目发布 1.1 修改环境配置为线上服务器的数据库地址 将网站下的三个json文件的数据库配置修改为线上的数据库环境 1.…
项目打包成手机app  通过什么打包? 1.HbuildX注册邮箱账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文件拷贝进项目3.可在manifest.json文件内设置app属性,如app名称,图标,等待加载动画等4.点击发行,选择第一项,其余默认5.等待发布完之后下载至本地,装到手机上即可(因无苹果证书,所以目前只测试了安卓版本)…
购买服务器 # 购买阿里云服务器 # 短期或是测试使用,创建 按量收费 服务器,可以随时删除,删除后不再计费,但要保证账户余额100元以上 连接服务器 1)账号 >: ssh root@39.98.154.56 2)密码 >: ******** 服务器命令 管理员权限 1)以下所有的服务器命令均可以在管理员权限下执行 >: sudo 命令 配置终端 1)编辑配置文件 >: vim ~/.bash_profile 2)将原来内容全部删除掉 >: ggdG 3)进入编辑状态:填入…
纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的…
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install npm -g 在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ npm install vue 命令行工具 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli 安装一次之后以后就不需要安装 $ npm install --glo…
redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据--存储在硬盘上 redis: 存在内存中 --- 速度最快 用途: --做缓存 --session数据 --游戏排行榜 --对速度要求高的数据的存储 -- 消息队列 ''' redis VS Memcached -- redis 支持五大数据类型 : 字符串| 列表| 字典 | 集合| 有序集合…
不多说,直接上干货! 首先你需要一个Github账号,所以还没有的话先去注册吧! https://github.com/ 见 如何走上更高平台分享传递干货知识:(开通个人Github面向开源及私有软件项目的托管平台:https://github.com/zlslch/)(图文详解)(博主推荐)   Git的安装 见 Git学习系列之Windows上安装Git详细步骤(图文详解) 1.进入Github首页,点击New repository新建一个项目 https://github.com/dash…