node服务器配置与部署

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