vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案
打包部署后默認(rèn)路由不正確
問(wèn)題描述
vue項(xiàng)目本地開(kāi)發(fā)的時(shí)候默認(rèn)路由沒(méi)問(wèn)題，例如
redirect:"/index"
但是部署以后，服務(wù)器上默認(rèn)路由不正確，現(xiàn)在遇到的問(wèn)題是，會(huì)默認(rèn)跳轉(zhuǎn)到login頁(yè)面，前提項(xiàng)目沒(méi)有做路由權(quán)限。
解決方案
打開(kāi)路由index.js文件，添加:base:"/"
const routers = new Router({
? mode: "history",
? base: "/"
})再次打包發(fā)布到服務(wù)器，發(fā)現(xiàn)問(wèn)題解決。
vue打包后路徑不對(duì)
1、查看package.json文件的scripts命令
2、打開(kāi)webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl點(diǎn)擊，跳轉(zhuǎn)到index.js文件
3、其中dev是開(kāi)發(fā)環(huán)境，build是構(gòu)建版本，找到build下面的assetsPublicPath: '/',然后修改為assetsPublicPath: './',即“/”前加點(diǎn)。
4、終端運(yùn)行 npm run build 即可。
對(duì)于背景圖片不顯示的問(wèn)題
項(xiàng)目目錄 > build文件夾 >utils.js
動(dòng)畫(huà)無(wú)法運(yùn)行
vue-cli腳手架package.json配置文件
"browserslist": [ "> 1%", "last 5 versions", "Android >= 4.0", "not ie <= 8" ]
小圖標(biāo)沒(méi)了
根據(jù)生成后的圖片路徑配置index.html中favicon路徑，如果favicon.ico在打包后的dist -> static 下
<link type="favicon" rel="shortcut icon" href="./static/favicon.ico" rel="external nofollow" />
v-bind在綁定img標(biāo)簽中的src屬性時(shí)，vue會(huì)把相對(duì)地址解析成字符串，而非路徑所以會(huì)導(dǎo)致圖片無(wú)法正常顯示
`<tab-bar-item v-for="i in 4">
<img slot="item-icon" :src="require('./assets/img/tabbar/'+tabbaricon[i-1]+'.svg')" alt="">
</tab-bar-item>`以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Ant design vue table 單擊行選中 勾選checkbox教程
這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue動(dòng)態(tài)添加背景圖簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加背景圖的相關(guān)資料,在一些場(chǎng)景下我們需要使用戶(hù)可以進(jìn)行自定義背景圖片,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue3實(shí)現(xiàn)word轉(zhuǎn)成pdf代碼的方法
在Vue 3中,前端無(wú)法直接將Word文檔轉(zhuǎn)換為PDF,因?yàn)閃ord文檔的解析和PDF的生成通常需要在后端進(jìn)行這篇文章主要介紹了Vue3實(shí)現(xiàn)word轉(zhuǎn)成pdf代碼的方法,需要的朋友可以參考下,2023-07-07
vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng)的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng),創(chuàng)建兩個(gè)table，隱藏第一個(gè)table的body部分，這樣就能得到一個(gè)固定的head，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Element實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的項(xiàng)目實(shí)踐
本文主要介紹了Element實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue如何給組件動(dòng)態(tài)綁定不同的事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
TinyMCE是一款易用、且功能強(qiáng)大的所見(jiàn)即所得的富文本編輯器,跟其他富文本編輯器相比,有著豐富的插件,支持多種語(yǔ)言,能夠滿(mǎn)足日常的業(yè)務(wù)需求并且免費(fèi),本文小編給大家詳細(xì)介紹了Vue中tinymce富文本功能配置,需要的朋友可以參考下2023-11-11
vuejs開(kāi)發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理
這篇文章主要介紹了vuejs開(kāi)發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了詳解vue的diff算法原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05