node.js 简介
Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言
Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好,V8引擎执行Javascript的速度非常快,性能非常好,基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。
官方网站:https://nodejs.org/zh-cn/
vue项目使用nodeJS在本地搭建服务器并部署
-
在需要部署的Vue项目终端中输入
npm run build
打包该项目,打包完成后自动生成一个特殊的文件夹名字为dist
,(注意:打包后的文件无法直接查看,需要部署到服务器上)。 -
创建一个文件夹,命名为
node
,使用编译器打开该文件夹,在该文件夹的终端输入npm init
使其变为一个合规的项目文件,初始化的过程中包名可以随意取,随后一直确认就可。 -
在文件夹下新建一个
server.js
和static
文件夹,server.js
用来编写服务器配置的程序代码,static
文件夹用于存放网站的静态资源。 -
在终端输入
npm i express
,引入服务器部署需要的包。 -
输入:
const express = require(‘express’) const app = express() //指定位置加载静态资源 app.use(express.static(_dirname + '/static')) app.listen(5005, (err) => { if(!err) console.log("服务器启动了") })
-
将Vue项目打包生成的特殊文件夹dist文件夹下的文件复制到node文件夹下的static文件夹中(注意:不要复制dist文件夹,仅需复制dist文件夹内的文件夹和文件)。
-
部署完毕后开启服务器
node server
history模式下的404问题解决
hash值是‘#’
及其后面的内容,hash值不会包含在http请求中,hash值不会带给服务器。
在单页面web网页中, 单纯的浏览器地址改变,网页不会重载,如单纯的hash网址改变网页不会变化,因此我们的路由主要是通过监听事件,并利用js实现动态改变网页内容,有两种实现方式:
hash模式:监听浏览器地址hash值变化,执行相应的js切换网页
history模式:利用history API实现url地址改变,网页内容改变
-
hash模式:
- 地址中永远带着
‘#’
号,不美观。 - 如果以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
- 地址中永远带着
-
history模式
-
地址干净,美观。
-
兼容性和hash模式相比略差。
-
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
-
不会多出
’#‘
字符,但是在服务器上部署完毕后,直接使用url跳转会出现404现象。但是能够在浏览器上记录历史访问记录。 -
控制台输入:
npm i connect-history-api-fallback
-
... const app = express() app.use(history()) //指定位置加载静态资源 app.use(express.static(_dirname + '/static')) ...
-
开启服务器:
node server
-