Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
更新時間：2020年08月18日 15:35:00 作者：niniHan
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
近期在參與用vue+ springBoot前后端不分離項目，遇到了前端打包后dist文件放到后臺無法運行報404錯誤，static下的資源都訪問不了問題。
問題1：我們知道前后端不分離項目，一些靜態(tài)圖片、頁面直接放在resource/static下，由于前后臺分開開發(fā)，前端進行了跨域處理，dist文件放到后臺就相當于本地靜態(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里面引用資源的相對地址
這樣配置下就ok了
后臺訪問時要加上assetsPublicPath地址dist，即http://localhost:8080/dist/index.html#
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了通過vue刷新左側(cè)菜單欄操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue-element-admin如何設置默認語言，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
由于公司要求在內(nèi)網(wǎng)開發(fā)項目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關于離線搭建vue環(huán)境運行項目的詳細步驟,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在 Vue 3 中，父子組件之間進行通信有多種方式，下面簡單介紹下常見的方式及其用法和使用場景，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車加減，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Vue 實現(xiàn)前端權限控制的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
下面小編就為大家分享一篇Vue.js 動態(tài)為img的src賦值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了vue整合百度地圖顯示指定地點信息，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04