前言

引用官方的解釋：

HTML5 History 模式

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁面不會(huì)重新加載。

默認(rèn)的hash模式的url像這樣：http://yoursite.com/index.html#/user/id

改為history模式后的url: http://yoursite.com/user/id

去掉#號(hào)的url好看了很多，那就讓我們開始吧

前端配置

vue 路由配置修改

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

后端配置

Apache 配置

1. 確保apache的rewrite模塊開啟

2. 在項(xiàng)目的更目錄，和index.html同級(jí)，創(chuàng)建一個(gè)文件.htaccess

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
   </IfModule>
   

3. 重啟apache2:

   service apache2 restart
   

Nginx 配置：

1. 修改配置文件 xxx.server

   location / {
    ......
    try_files $uri $uri/ /index.html;
    root /home/sourcecode/dist;
    ......
   }
   

   其中 root路徑 為項(xiàng)目打包好的文件夾路徑

鏈接

github：https://github.com/pandaomeng/blog

博客：https://pandaomeng.com