vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
在开发Vue应用时，通常会使用vue-router作为前端路由管理器。默认情况下，vue-router采用的是`hash`模式，这会在URL中添加一个`#`符号，如`http://localhost:8080/bank/page/count/#/`。然而，为了获得更美观的URL，可以切换到`history`模式，例如`http://localhost:8080/bank/page/count`。在这种模式下，路由的变化不会导致页面的完整刷新，而是通过JavaScript动态更新内容。
启用`history`模式后，前端路由的工作方式发生了变化。当用户直接输入URL或刷新页面时，浏览器会向服务器发送请求。由于此时服务器并没有对应的静态资源，因此会出现404错误。为了解决这个问题，需要对服务器进行配置，确保所有未知路径都重定向到Vue应用的入口HTML文件，通常是`index.html`。
对于使用Apache作为Web服务器的情况，可以通过编辑`.htaccess`文件实现这一目的。以下是配置示例：
```apacheconf
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /bank/page/index.html [L]
</IfModule>
```
这段代码会将所有未找到的文件请求重定向到`/bank/page/index.html`。请确保`RewriteBase`和`RewriteRule`中的路径与Vue应用的基础路径相匹配，并且在vue-cli的配置文件`config/index.js`中，将`build.assetsPublicPath`设置为`'/bank/page/'`。
对于使用Nginx作为Web服务器的情况，配置如下：
1. 在Nginx的配置文件（通常为`/etc/nginx/nginx.conf`）中的`server`块内，添加以下规则：
```nginx
location / {
try_files $uri $uri/ /bank/page/index.html;
}
```
这段配置会让Nginx尝试查找实际文件，如果找不到，则将请求传递给`/bank/page/index.html`，使得Vue应用能够处理路由。
2. 之后，重启Nginx服务以应用新的配置。
在部署Vue项目到Nginx时，先通过`npm run build`命令打包应用，生成的静态文件应被放置在Nginx的相应目录下，如`/var/www/html/bank/page`。
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的前端路由系统能够接管导航。正确配置后，用户可以直接通过干净的URL访问各个页面，而无需担心404错误。
