node 搭建简易服务器 & connect-history-api-fallback 解决 VueRouter 中资源访问 404 问题

一.问题:

　　在前端项目开发完成后，一般需要放在服务器下运行，这里搭建一个 node 服务器，用来运行前端项目。

二.搭建 node 服务:

　　1.新建一个文件夹:

　　　　

 　　2.初始化:

npm init

　　3.初始化选项一路回车

　　　　

 　　4.安装 express:

npm i express

　　

 　　5.新建 static 文件夹，用来放置项目文件:

　　

 　　6.把自己打包好的项目放入 static 文件夹中:

　　

 　　7.新建 server.js 文件,实现服务器逻辑:

　　

 　　在 server.js 中写入如下代码

// 引入 express
const express = require('express')

// 创建时实例对象
const app = express()

// 配置后端路由
app.get('/testApi',(req,res)=>{
    // 返回给请求者信息
    res.send({
        name:'zhangsan',
        age:18
    })
})

// 监听端口,这里的端口自定义,随便写
app.listen(5500,(err)=>{
    if(!err)console.log("服务开启成功!")
})

　　终端输入:

node server

　　就可以开启服务了。

　　

 

 　　8.访问下试试: http://localhost:5500/testApi

　　

 

三.配置自己项目访问路径:

// 使用中间件识别静态资源
// http://localhost:5500/index.html 访问到 index.html
app.use(express.static(__dirname+'/static'))

　　这时候访问 http://localhost:5500/ 就可以访问到自己的项目了。

　　完整代码:

// 引入 express
const express = require('express')

// 创建时实例对象
const app = express()

// 使用中间件识别静态资源
// http://localhost:5500/index.html 访问到 index.html
app.use(express.static(__dirname+'/static'))

// 配置后端路由
app.get('/testApi',(req,res)=>{
    // 返回给请求者信息
    res.send({
        name:'zhangsan',
        age:18
    })
})

// 监听端口,这里的端口自定义,随便写
app.listen(5500,(err)=>{
    if(!err)console.log("服务开启成功!")
})

四.解决Vue项目中，vueRouter 使用 history 模式访问资源 404 的问题。

　　1.安装 connect-history-api-fallback

npm i connect-history-api-fallback

　　2.在 server.js 中添加如下代码:

// connect-history-api-fallback 插件,用来解决 访问资源 404 问题
// 安装 npm i connect-history-api-fallback
// 引入 connect-history-api-fallback 插件
const history = require('connect-history-api-fallback');
// 使用中间件
app.use(history())

　　完整代码:

// 引入 express
const express = require('express')

// 创建时实例对象
const app = express()


// connect-history-api-fallback 插件,用来解决 访问资源 404 问题
// 安装 npm i connect-history-api-fallback
// 引入 connect-history-api-fallback 插件
const history = require('connect-history-api-fallback');
// 使用中间件
app.use(history())


// 使用中间件识别静态资源
// http://localhost:5500/index.html 访问到 index.html
app.use(express.static(__dirname+'/static'))

// 配置后端路由
app.get('/testApi',(req,res)=>{
    // 返回给请求者信息
    res.send({
        name:'zhangsan',
        age:18
    })
})

// 监听端口,这里的端口自定义,随便写
app.listen(5500,(err)=>{
    if(!err)console.log("服务开启成功!")
})

END...