vue-router 默认路由模式为 hash 模式，该模式是使用 url 的 hash 来模拟一个完整的 url。但使用这种模式，URL 中会带一个 # 号（比如 http://127.0.0.1:9090/#/about），比较丑，不像是正常的 url。
除了默认的 hash 模式外，我们也可以用路由的 history 模式。 当我们使用 history 模式时，URL 就像正常的 url 了，例如 http://127.0.0.1:9090/about。不过要使用这种模式，还需要后台服务端的支持。下面以使用 Nginx 为例，演示如何进行配置。
需要后台配置的原因：
- 因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://127.0.0.1:9090/about 时，服务端以为没有找到对应文件，就会返回 404 错误。
- 因此我们要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是我们 app 依赖的页面。
情况一：项目直接使用根域名，没有二级路径
1，Nginx 配置修改
这种情况是同一个域名下只有一个项目，没有其他二级路径，因此 root 直接指向目标文件夹，即包含 index.html 的文件夹路径即可。
提示：try_files 是实现 History 模式的关键配置。该指令作用是按指定的 file 顺序查找存在的文件，并使用第一个找到的文件进行请求处理。
server {
listen 9090;
server_name localhost;
#access_log logs/host.access.log main;
location / {
root /opt/test-app/dist;
try_files $uri $uri/ /index.html;
index index.html;
}
#error_page 404 /404.html;
}
2，Vue 项目配置
Vue 项目这边我们只需要将 VueRouter 的 mode 设置为 history 即可：
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
3，运行测试
重启 Nginx 服务，访问一个路由路径为 /about 页面效果如下：
情况二：项目使用二级路径
1，Nginx 配置修改
（1）如果同一个域名下有多个项目，那么不同项目就需要用二级路径来区分了。假设我们使用 /hangge 作为该项目的二级域名，那么 Nginx 这边配置如下：
注意：这里我们指定文件路径使用的是 alias，而不是 root。
server {
listen 9090;
server_name localhost;
#access_log logs/host.access.log main;
location /website {
alias /opt/test-app/dist;
try_files $uri $uri/ /hangge/index.html;
index index.html;
}
#error_page 404 /404.html;
}
2，Vue 项目配置修改
（1）首先我们修改路由配置，由于现在使用 /webiste 作为该项目的二级域名，那么路由的 base 则设置成 /website
const router = new VueRouter({
mode: 'history',
base: '/website',
routes
})
（2）如果项目是 vue-cli 4 搭建的，需要修改 vue.config.js 文件，将 publicPath 属性设置为 './'。
提示：vue.config.js 是一个可选的配置文件，如果项目根目录不存在该文件，可以手动创建 (和 package.json 同级) 。
module.exports = {
publicPath: './'
}
- 而如果项目是 vue-cli 3.X 搭建的，同样是修改 vue.config.js 文件，不过是将 baseUrl 属性设置为 './'
module.exports = {
baseUrl: './'
}
3，运行测试
重启 Nginx 服务，访问一个路由路径为 /about 页面效果如下：
文章评论