如何使用 Node.js 和 Express 来配置一个支持 Vue Router 的 History 模式的服务器

源码资源网

如何使用 Node.js 和 Express 来配置一个支持 Vue Router 的 History 模式的服务器
### 1. 安装 Node.js 和 Express
首先，确保你已经安装了 Node.js。然后，在你的项目目录中初始化一个新的 Node.js 项目并安装 Express：

1. npm init -y
   
2. npm install express

复制代码

### 2. 创建服务器文件
在你的项目根目录下，创建一个名为  `server.js`  的文件，并在其中添加以下代码：

1. const express = require('express');
   
2. const path = require('path');
   
3. const app = express();
   
4. const port = process.env.PORT || 8080; // 设置端口号
   
5. // 指定静态文件目录为打包后的 dist 文件夹
   
6. app.use(express.static(path.join(__dirname, 'dist')));
   
7. // 所有其他路由请求都重定向到 index.html
   
8. app.get('*', (req, res) => {
   
9.     res.sendFile(path.join(__dirname, 'dist', 'index.html'));
   
10. });
    
11. // 启动服务器
    
12. app.listen(port, () => {
    
13.     console.log(`Server is running on http://localhost:${port}`);
    
14. });

复制代码

### 3. 打包 Vue 应用
在你的 Vue 项目中，使用以下命令打包项目：

1. npm run build

复制代码

这将生成一个  `dist`  文件夹，里面包含了你的打包后的静态文件。
### 4. 启动服务器
在终端中运行以下命令来启动服务器：

1. node server.js

复制代码

### 5. 访问应用
在浏览器中访问  `http://localhost:8080` ，你应该能够访问你的 Vue 应用的首页。访问其他路由，例如  `http://localhost:8080/about` ，也应该能够正常工作，因为所有的请求都会被重定向到  `index.html` ，然后由 Vue Router 处理。
### 6. 处理错误
如果你希望在应用中处理404错误（即用户访问了不存在的路由），可以在  `server.js`  文件中添加一个中间件：

1. app.use((req, res) => {
   
2.     res.status(404).send('404 Not Found');
   
3. });

复制代码

### 总结
通过以上步骤，你可以使用 Node.js 和 Express 创建一个支持 Vue Router 的 History 模式的服务器。这样，你的 Vue 应用就能够正确处理所有路由请求，而不会出现404错误。