問題描述

由于vue-router默認(rèn)的hash模式，地址欄url看起來是這樣的

127.0.0.1/#/home

如果我們不想要url中出現(xiàn)#，即

127.0.0.1/home

則我們需要在創(chuàng)建router時(shí)指定mode參數(shù)

export default new Router({
    mode: 'history',
    routes: []
})

在開發(fā)環(huán)境下，這并不會(huì)引發(fā)什么問題。
但是當(dāng)項(xiàng)目上線，假如你們使用nginx來代理前端資源時(shí)
當(dāng)你直接由地址欄訪問除了/以外的地址或刷新頁面時(shí)，預(yù)期應(yīng)當(dāng)出現(xiàn)的頁面變成了nginx 404頁面
這是由于nginx無法找到對應(yīng)名字的靜態(tài)資源

解決辦法

在nginx.conf配置文件靜態(tài)資源對應(yīng)的location配置項(xiàng)下加入
try_files $uri $uri/ /index.html;
look

location / {
　　root   /home/xxx/frontend/dist;
　　index  index.html index.htm;
　　try_files $uri $uri/ /index.html;
}