vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案
打包部署后默認(rèn)路由不正確
問(wèn)題描述
vue項(xiàng)目本地開發(fā)的時(shí)候默認(rèn)路由沒問(wèn)題，例如
redirect:"/index"
但是部署以后，服務(wù)器上默認(rèn)路由不正確，現(xiàn)在遇到的問(wèn)題是，會(huì)默認(rèn)跳轉(zhuǎn)到login頁(yè)面，前提項(xiàng)目沒有做路由權(quán)限。
解決方案
打開路由index.js文件，添加:base:"/"
const routers = new Router({
? mode: "history",
? base: "/"
})再次打包發(fā)布到服務(wù)器，發(fā)現(xiàn)問(wèn)題解決。
vue打包后路徑不對(duì)
1、查看package.json文件的scripts命令
2、打開webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl點(diǎn)擊，跳轉(zhuǎn)到index.js文件
3、其中dev是開發(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)畫無(wú)法運(yùn)行
vue-cli腳手架package.json配置文件
"browserslist": [ "> 1%", "last 5 versions", "Android >= 4.0", "not ie <= 8" ]
小圖標(biāo)沒了
根據(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)文章
vue shallowRef作用及引發(fā)問(wèn)題詳解
這篇文章主要為大家介紹了vue shallowRef作用及引發(fā)問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中使用element ui的彈窗與echarts之間的問(wèn)題詳解
這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題
這篇文章主要介紹了解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。這篇文章主要介紹了vue組件間通信六種方式,需要的朋友可以參考下2019-05-05
Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue中Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決方案
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳
這篇文章主要為大家詳細(xì)介紹了vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue自定義指令獲取不到參數(shù)的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
小編在開發(fā)使經(jīng)常會(huì)碰到全局切換問(wèn)題，今天小編給大家?guī)?lái)一篇教程給大家介紹vue 全局環(huán)境切換問(wèn)題，感興趣的朋友一起看看吧2019-10-10