操作步骤

1. 新建一个文件夹作为服务器的根目录，文件夹命名可随意，这里小编命名为 server。

2. 在 VSCode 中打开 server 文件夹。

3. 打开 server 终端，使用下面指令对目录进行初始化。

   npm init

   

   注：这里除了 package name 需要手动输入外，其他的一路回车。

4. 安装 express

   npm i express

5. 在根目录中创建一个主文件 server.js 代码如下

   const experss = require('express');
   const app = experss();
   
   app.get('/stu',(req,res) => {
       res.send({
           name: 'SevenOne',
           age: 21
       })
   })
   
   app.listen(5005,(err) => {
       if(!err) console.log('服务器启动成功！');
   })

   此时在终端执行 node server，然后访问 localhost:5005/stu 即可拿到数据。

6. 在项目根目录创建一个 static 的文件夹，这个目录用来存放前端的代码。修改 server.js 代码如下

   const experss = require('express');
   const app = experss();
   app.use(experss.static(__dirname + '/static'));
   
   app.get('/stu',(req,res) => {
       res.send({
           name: 'SevenOne',
           age: 21
       })
   })
   
   app.listen(5005,(err) => {
       if(!err) console.log('服务器启动成功！');
   })

   我们在 static 文件夹内创建 index.html 文件。此时重启 node 服务，访问 localhost:5005 即可加载 index.html 文件。

解决 history 模式路由

1. 借助 connect-history-api-fallback 包解决 history 模式路由。

2. 安装

   npm i connect-history-api-fallback

3. 修改 server.js 文件

   const experss = require('express');
   const history = require('connect-history-api-fallback');
   const app = experss();
   
   app.use(history())
   app.use(experss.static(__dirname + '/static'));
   
   app.listen(5005,(err) => {
       if(!err) console.log('服务器启动成功！');
   })

4. 重启服务即可。