Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
近期在參與用vue+ springBoot前后端不分離項(xiàng)目,遇到了前端打包后dist文件放到后臺(tái)無法運(yùn)行報(bào)404錯(cuò)誤,static下的資源都訪問不了問題。
問題1:我們知道前后端不分離項(xiàng)目,一些靜態(tài)圖片、頁面直接放在resource/static下,由于前后臺(tái)分開開發(fā),前端進(jìn)行了跨域處理,dist文件放到后臺(tái)就相當(dāng)于本地靜態(tài)資源,所以不需要跨域處理,可以將引入跨域的路徑baseURL置空
const service = axios.create({ //baseURL: '/appstore', baseURL: '', responseType: 'json', timeout: 5000 // request timeout })
問題2:就是assetsPublicPath的問題,先去分析下assetsPublicPath和assetsSubDirectory 。
找到config/index.js文件下的build配置改為 assetsPublicPath: '/dist/'
build: { index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // assetsPublicPath: '/', assetsPublicPath: '/dist/', }
- index:模板
- assetsRoot:打包后文件存放的路徑
- assetsSubDirctory:除了index.html之外的靜態(tài)資源要存放的路徑
- assetsPublicPath: 代表打包后,index.html里面引用資源的相對(duì)地址
這樣配置下就ok了
后臺(tái)訪問時(shí)要加上assetsPublicPath地址dist,即http://localhost:8080/dist/index.html#
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總,需要的朋友可以參考下2023-03-03vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08element?table?表格控件實(shí)現(xiàn)單選功能
本文主要介紹了element?table?表格控件實(shí)現(xiàn)單選功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07解決vue的 v-for 循環(huán)中圖片加載路徑問題
今天小編就為大家分享一篇解決vue的 v-for 循環(huán)中圖片加載路徑問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09一文詳解Vue選項(xiàng)式?API?的生命周期選項(xiàng)和組合式API
這篇文章主要為大家介紹了Vue選項(xiàng)式?API?的生命周期選項(xiàng)和組合式API變化詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03vue-cli開發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟
這篇文章主要介紹了Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下2020-11-11