一、使用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.在手机上刷新重试