Vue 去除路徑中的#號
在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標示,而且還去不掉,很丑陋。
眾所周知,vue-router有兩種模式,hash模式和history模式。
帶#的則是hash模式。
將router中的mode設(shè)置為history就可以了
接下來有個問題,界面一刷新,就變404了?。。?!
網(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 去除路徑中的#號,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作
這篇文章主要介紹了vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09解決VUEX的mapState/...mapState等取值問題
這篇文章主要介紹了解決VUEX的mapState/...mapState等取值問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07詳解vue-router 2.0 常用基礎(chǔ)知識點之導航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識點之導航鉤子,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04