Vue-cli assets SubDirectory及PublicPath區(qū)別詳解

更新時間：2020年08月18日 15:35:00 作者：niniHan

這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

近期在參與用vue+ springBoot前后端不分離項目，遇到了前端打包后dist文件放到后臺無法運行報404錯誤，static下的資源都訪問不了問題。

問題1：我們知道前后端不分離項目，一些靜態(tài)圖片、頁面直接放在resource/static下，由于前后臺分開開發(fā)，前端進(jìn)行了跨域處理，dist文件放到后臺就相當(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里面引用資源的相對地址

這樣配置下就ok了

后臺訪問時要加上assetsPublicPath地址dist，即http://localhost:8080/dist/index.html#

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

通過vue刷新左側(cè)菜單欄操作
這篇文章主要介紹了通過vue刷新左側(cè)菜單欄操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue-element-admin如何設(shè)置默認(rèn)語言
這篇文章主要介紹了vue-element-admin如何設(shè)置默認(rèn)語言，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
離線搭建vue環(huán)境運行項目詳細(xì)步驟
由于公司要求在內(nèi)網(wǎng)開發(fā)項目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運行項目的詳細(xì)步驟,需要的朋友可以參考下
2023-11-11
vue-cli腳手架的.babelrc文件用法說明
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue實現(xiàn)文件上傳和下載
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue3中父子傳參常見方式及用法
在 Vue 3 中，父子組件之間進(jìn)行通信有多種方式，下面簡單介紹下常見的方式及其用法和使用場景，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2024-01-01
vue實現(xiàn)購物車加減
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車加減，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
Vue 實現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實現(xiàn)前端權(quán)限控制的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
Vue.js 動態(tài)為img的src賦值方法
下面小編就為大家分享一篇Vue.js 動態(tài)為img的src賦值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue整合百度地圖顯示指定地點信息
本文主要介紹了vue整合百度地圖顯示指定地點信息，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04