?vue搭建的項目劳曹,路由一直用的hash模式铁孵,所以url中都會帶有一個“#”號》孔剩現(xiàn)在想要去掉“#”,于是使用history模式 { mode: 'history' }轰异,代碼如下:
const router =new VueRouter({
? mode: 'history',
? routes: routers
});
mode: 'history'搭独,使用這個模式,在開發(fā)階段一切都是正常的牙肝,訪問地址是localhost:8888,以上沒什么錯誤虫溜,一切都好用股缸。url里也沒有#了。可是打包之后瘾境,訪問項目會發(fā)現(xiàn)頁面一片空白的情況歧杏。不是404得滤,不報錯,只是空白6急膀!
解決辦法如下:
很多項目都放在了服務(wù)器根目錄下面,訪問后的url就是:http://123.com卓嫂,這是一種解決辦法
假如我的項目沒有放在服務(wù)器根目錄下,放在了服務(wù)器的nice/app下行瑞,那么打開地址是:http://123.com/nice/app
? 那么這里問題就來了餐禁,我們配的路由中并沒有nice/app,所以無法找到路徑中的組件帮非,所以也就無法渲染了。這就是導(dǎo)致空白的原因!
此時只需要修改router中的index.js筑舅,給路由中加一個base的屬性陨舱,值為 ‘/nice/app/’就可以了。代碼:
const router =new VueRouter({
? mode: 'history', base: '/nice/app/',routes: routers});
記住這個base心剥,base值兩邊一定要有"/"背桐,不要寫成“nice/app”、“/nice/app”或者“nice/app/”链峭。
其次,這個文件夾是服務(wù)器放項目的文件夾熙卡,不是你本地項目的文件夾位置!滑燃!