Vue 去除路徑中的＃號
更新時間：2018年04月19日 14:24:35 作者：你是豬嗎是嗎是嗎是嗎是嗎
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號的解決方法，感興趣的朋友一起看看吧
在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標示，而且還去不掉，很丑陋。
眾所周知，vue-router有兩種模式，hash模式和history模式。
帶＃的則是hash模式。
將router中的mode設(shè)置為history就可以了
接下來有個問題，界面一刷新，就變404了！?。。?/p>
網(wǎng)上搜了下，需要對后端環(huán)境進行一個配置。
這里只列舉nginx的配置，其他的配置點擊這里去官網(wǎng)看
先配置config/index.js
修改assetsPublicPath為根目錄
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', // hash 模式會默認的在此處 添加為 assetsPublicPath: './'
productionSourceMap: true,
...
}
}
然后配置nignx
server {
listen 0.0.0.0:12345;
location / {
root /home/我的應(yīng)用跟目錄;
try_files $uri $uri/ /index.html =404; // 這個是重點
}
error_page 404 /index.html
}
Url再也沒有＃了，多完美
總結(jié)
以上所述是小編給大家介紹的Vue 去除路徑中的＃號，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項目怎樣用nginx反向代理WebSocket請求地址
這篇文章主要介紹了vue項目怎樣用nginx反向代理WebSocket請求地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了uni-app 的基礎(chǔ)組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
element-plus日歷(Calendar)動態(tài)渲染以及避坑指南
這篇文章主要給大家介紹了關(guān)于element-plus日歷(Calendar)動態(tài)渲染以及避坑指南的相關(guān)資料,這是最近幫一個后端朋友處理一個前端問題,elementUI中calendar日歷組件內(nèi)容進行自定義顯示,實現(xiàn)類似通知事項的日歷效果,需要的朋友可以參考下2023-08-08
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了Vue對話框組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對vue來說index.html是一個總的入口文件,vue是單頁面應(yīng)用,掛在id為app的div下然后動態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項目遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于elementUI中Table表格問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了vue 實現(xiàn)的樹形菜單,需要的朋友可以參考下2018-03-03
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08