vue中使用http-sever启动打包后的网站，除了index外，其它路由无法访问

源码资源网

vue中使用http-sever启动打包后的网站，除了index外，其它路由无法访问
在 Vue 项目中，如果你使用  `http-server`  启动打包后的静态网站，遇到除了根路由（ `/` ）和  `index`  路由外，其他路由无法访问的问题，通常是由于 Web 服务器没有正确配置以支持 Vue Router 的历史模式。
### 解决方案
1. **使用 Hash 模式**：
   如果你在 Vue Router 中使用了 Hash 模式（ `mode: 'hash'` ），那么所有的路由都会以  `#`  开头，这样就不会有问题。你可以通过以下方式配置 Vue Router：

1. const router = new VueRouter({
   
2.      mode: 'hash',
   
3.      routes: [
   
4.        { path: '/', component: Home },
   
5.        { path: '/about', component: About },
   
6.        { path: '/contact', component: Contact }
   
7.      ]
   
8.    });

复制代码

在这种模式下，访问路由的格式是：
   - 首页： `http://your-domain.com/#/`
   - 关于页面： `http://your-domain.com/#/about`
   - 联系页面： `http://your-domain.com/#/contact`
2. **使用 History 模式**：
   如果你希望使用历史模式（ `mode: 'history'` ），你需要在  `http-server`  中配置重定向，以确保所有的路由请求都重定向到  `index.html` 。因为  `http-server`  默认不支持重定向，你可以使用  `connect-history-api-fallback`  中间件来实现。
    你可以按照以下步骤进行配置：
   - 首先，安装  `http-server`  和  `connect-history-api-fallback` ：

1. npm install -g http-server connect-history-api-fallback

复制代码

- 然后，创建一个简单的 Node.js 服务器来处理重定向：

1. const express = require('express');
   
2.      const history = require('connect-history-api-fallback');
   
3.      const path = require('path');
   
4.       const app = express();
   
5.       app.use(history());
   
6.      app.use(express.static(path.join(__dirname, 'dist')));
   
7.       const port = process.env.PORT || 8080;
   
8.      app.listen(port, () => {
   
9.        console.log(`Server is running on http://localhost:${port}`);
   
10.      });

复制代码

- 运行这个服务器，然后访问你的应用，所有路由请求都会被重定向到  `index.html` ，从而实现 Vue Router 的正常工作。
### 总结
如果你希望在使用  `http-server`  启动打包后的 Vue 应用时能够访问所有路由，可以选择使用 Hash 模式，或者使用 Node.js 创建一个简单的服务器来处理历史模式的路由重定向。这样就能解决除了首页外无法访问其他路由的问题。