使用node搭建服务器(wifi连接查看vue项目)
一、使用wifi连接node平台搭建的服务器,进行vue项目查看的步骤
最近新学了node搭建服务器,步骤比较多,怕忘记了,按操作顺序记录下来供参考
1.首先找到vue项目的文件夹,在上方输入“cmd”命令
2.输入“npm run build
”命令进行打包
(用vue脚手架生成的项目,直接这么写,不然要去package.json里配置快捷键)
3.打包完成,生成了dist文件夹
4.复制这三个文件夹
data文件夹:我放的是项目需要用的json、images;
dist文件夹:打包生成的文件夹;
index.html:项目主页
5.在桌面新建一个文件夹(随便建哪里,新建一个就好了)
6.双击打开新文件夹,输入“cmd”命令
7.进入cmd界面
①输入“npm init -y
”初始化;
②输入“cnpm/npm i express -S
”,下载express包
【可以用cnpm或者npm,cnpm下载速度比较快,不过用cnpm要提前安装,cnpm安装教程网址:https://www.cnblogs.com/liyuspace/p/10338570.html;-S是为了写依赖】
8.demo文件夹–>新建www文件夹–>新建 名为 “xxx” 的文件夹–>粘贴文件
①在“demo”文件夹下,新建“www”文件夹;
②然后在“www”文件夹下,再新建一个“xxx”文件夹(自己取名字);
③将刚才复制的文件(data、dist、index.html),粘贴在“xxx”文件夹(第二步建的)里面
9.回到demo文件夹目录下,新建“readfile.js”文件
(特别注意:readfile.js和www、node_modules文件夹同级)
10.在刚才的readfile.js里写以下内容:
const express=require('express');
const app=express();app.use('/',express.static('./www/whuiry'))
app.listen('8989','192.168.1.107');
或者,也可以用第二种 app.use 填写方式
const express=require('express');
const app=express();app.use('/whuiry',express.static('./www/whuiry'))
app.listen('8989','192.168.1.107');
【不知道IP地址的话,win+R–>输入“cmd”–>ipconfig–>查看下面的IPv4地址】
11.返回demo目录下,在上方输入cmd命令
12.输入“node readfile.js
”,运行服务器
13.可以先在电脑浏览器看一下服务器有没有开好
打开浏览器,输入“http://192.168.1.107:8989”【http://IP地址:端口号】,回车进入
如果电脑连接的是网线:可以用电脑开热点,然后手机连接电脑wifi;
如果电脑连接的是wifi:那么直接用手机连接这个wifi**
14.在手机上,复制“http://192.168.1.107:8989”(自己)网址,打开浏览器运行
15.就可以在手机上查看自己做的vue项目啦
二、如果 页面加载失败 或者 服务器拒绝访问
可能是因为防火墙原因导致失败的,可以尝试关闭防火墙再试试
1.在电脑右下方点击盾牌图标
2.点击“防火墙和网络保护”
3.点击“允许应用通过防火墙”
4.点击“系统和安全”
5.点击“检查防火墙状态”
6.点击“启用或关闭Windows Defender防火墙”
7.选择关闭
8.选择完成后,点击确定,即可关闭
9.在手机上刷新重试
使用node搭建服务器(wifi连接查看vue项目)相关推荐
- 服务端api用php写还是用node,如何使用node搭建服务器,写接口,调接口,跨域
这次给大家带来如何使用node搭建服务器,写接口,调接口,跨域,使用node搭建服务器,写接口,调接口,跨域的注意事项有哪些,下面就是实战案例,一起来看一下.. 服务端项目目录下: 1.npm ini ...
- 写服务器node实际项目,基于node搭建服务器,写接口,调接口,跨域的实例
刚开始学node,今天做这个也是累死宝宝了,以后可以自己写接口自己用了,再也不用麻烦人家后台人员了,这些年我们欠他们的太多了,说多了都是泪,不多说,往下看吧... 服务端项目目录下: 1.npm in ...
- 服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目 首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
- 手机浏览器查看vue项目
在手机浏览器上面我们可以直接查看vue项目.在有网的条件下,我们使用指令npm run serve启动一个项目,会出现两个网址,一个是本地的,一个是网络的.在手机浏览器地址栏输入第二个网址(Netwo ...
- 记一次升级node版本后,运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法 参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
- 服务器上部署前端Vue项目代码
服务器上部署前端Vue项目代码 本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错
- vue项目如何放到服务器上,怎么把vue项目放在node服务器上?
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 将vue项目 ...
- Vue笔记——搭建脚手架并快速创建Vue项目
现在的Vue脚手架已经升级到3.x版本,即vue-cli3. 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程,以及使用新旧版本脚手架创建项目的过程. 下面的安装 ...
- 一步一步带你安装Node.js并创建第一个Vue项目
Node.js官方链接:下载 | Node.js 中文网 下载安装包,一路next直到安装成功,它默认配置好了环境变量,然后以管理员的身份运行DOS命令 查看Node.js版本号 node -v 查看 ...
最新文章
- python 进行一元线性回归并输出相关结果_Python实现一元线性回归实战
- Node.js: 如何继承 events 自定义事件及触发函数
- dj鲜生-30-退出用户的登陆
- Google 也要“勒紧腰带”过日子了!
- 基于rhel7.2的mysql5.7.13安装与配置
- 选择软件测试作为你的职业,一个无经验的大学毕业生,可以转行做软件测试吗?
- binlog的基本介绍和操作
- java datagrid导出excel_Datagrid数据导出到Excel文件给客户端下载的几种方法
- 高性能MySQL概述
- pulse 去马赛克软件_一款号称能去马赛克的软件,却在面对游戏角色时“翻了车”...
- java ArrayList 排序
- WPS按Tab键无效果
- mysql.sock 路径_关于mysql.sock路径的问题
- Openlayers3中如何优雅的表示等值面
- 关于计算机知识的动画电影,动画概论总复习题目(附答案)
- 【编译原理】 根据语法树 写出对应的短语 直接短语 句柄 构造产生式
- 通过AI,领略皮影戏艺术 | MixLab人工智能
- 基于SSH的婴幼儿产品销售系统的开发与设计毕业设计论文
- 测试开发成长学习路线--如何做一个DevOps流水线上的开发测试
- linux毫米波雷达程序,用毫米波雷达数据做SLAM