vue打包后只能访问index路由,其它路由无法访问了

源码资源网

vue打包后只能访问index路由,其它路由无法访问了
在 Vue 应用打包后，如果你只能访问根路由（ `/` ）和  `index`  路由，而无法访问其他路由，通常是因为你的 Web 服务器没有正确配置以支持 Vue Router 的历史模式。
### 解决方案
1. **使用 HTML5 History 模式**：
   如果你在 Vue Router 中使用了历史模式（ `mode: 'history'` ），你需要确保你的 Web 服务器能够正确处理所有路由请求。
    对于不同的 Web 服务器，配置方式略有不同：
    - **Nginx**：
     在 Nginx 的配置文件中，你需要添加一个  `try_files`  指令，以确保所有请求都重定向到  `index.html` ：

1. nginx
   
2.      server {
   
3.          listen 80;
   
4.          server_name your_domain.com;
   
5.           location / {
   
6.              root /path/to/your/dist;
   
7.              try_files $uri $uri/ /index.html;
   
8.          }
   
9.      }

复制代码

- **Apache**：
     在 Apache 中，你可以使用  `.htaccess`  文件来实现相同的功能：

1. apache
   
2.      <IfModule mod_rewrite.c>
   
3.        RewriteEngine On
   
4.        RewriteBase /
   
5.        RewriteRule ^index\.html$ - [L]
   
6.        RewriteCond %{REQUEST_FILENAME} !-f
   
7.        RewriteCond %{REQUEST_FILENAME} !-d
   
8.        RewriteRule . /index.html [L]
   
9.      </IfModule>

复制代码

- **Node.js (Express)**：
     如果你使用 Express，可以在路由中添加一个通配符来处理所有未匹配的路由：

1. const express = require('express');
   
2.      const path = require('path');
   
3.      const app = express();
   
4.       app.use(express.static(path.join(__dirname, 'dist')));
   
5.       app.get('*', (req, res) => {
   
6.        res.sendFile(path.join(__dirname, 'dist', 'index.html'));
   
7.      });
   
8.       const port = process.env.PORT || 3000;
   
9.      app.listen(port, () => {
   
10.        console.log(`Server is running on port ${port}`);
    
11.      });

复制代码

2. **使用 Hash 模式**：
   如果你不想配置服务器，可以考虑将 Vue Router 的模式设置为  `hash` ，这样所有路由都会以  `#`  开头，浏览器会处理这些请求而不需要服务器的支持：

1. const router = new VueRouter({
   
2.      mode: 'hash',
   
3.      routes: [
   
4.        // your routes
   
5.      ]
   
6.    });

复制代码

### 总结
确保你的 Web 服务器配置正确，以支持 Vue Router 的历史模式，或者考虑使用 Hash 模式来避免这个问题。这样就可以访问所有的路由了。