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 中写入如下代码
1 // 引入 express 2 const express = require('express') 3 4 // 创建时实例对象 5 const app = express() 6 7 // 配置后端路由 8 app.get('/testApi',(req,res)=>{ 9 // 返回给请求者信息 10 res.send({ 11 name:'zhangsan', 12 age:18 13 }) 14 }) 15 16 // 监听端口,这里的端口自定义,随便写 17 app.listen(5500,(err)=>{ 18 if(!err)console.log("服务开启成功!") 19 })
终端输入:
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...