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設置為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/我的應用跟目錄;
try_files $uri $uri/ /index.html =404; // 這個是重點
}
error_page 404 /index.html
}
Url再也沒有＃了，多完美
總結
以上所述是小編給大家介紹的Vue 去除路徑中的＃號，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務器的操作,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
vue3 中的 hooks 就是函數(shù)的一種寫法，就是將文件的一些單獨功能的js代碼進行抽離出來，放到單獨的js文件中，或者說是一些可以復用的公共方法/功能，這篇文章主要介紹了vue3中hooks的簡介及用法,需要的朋友可以參考下2023-01-01
解決VUEX的mapState/...mapState等取值問題
這篇文章主要介紹了解決VUEX的mapState/...mapState等取值問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了vue移動端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本篇文章主要介紹了vue-router 2.0 常用基礎知識點之導航鉤子，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue動態(tài)綁定v-model屬性名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03