Vue Build后的項目的根路徑配置方式
Vue Build后的項目的根路徑配置問題
問題描述
使用Vue-cli 版本v3.12.1，build之后默認的根目錄contextPath為/。
如果正式部署的路徑不是/，則需要修改發(fā)布的根路徑，否則會js和靜態(tài)資源會報404問題。
修改方法
工程文件 /config/index.js修改build下的assetsPublicPath，該值為根路徑配置。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', // 修改為需要地址
}
同樣的，如果要修改靜態(tài)文件的名稱，可以修改assetsSubDirectory。
新手Vue build沒改根路徑配置的坑
沒有修改配置文件等直接 build 項目之后，打開 dist 中的 index.html 或者將 dist 文件夾上傳至 GitHub 打開頁面空白。
這里是因為沒有修改項目資源路徑，解決方法是：
打開項目根目錄下的 config 下的 index.js 文件，在 build 部分將 assetsPublicPath: '/' 改為 assetsPublicPath: './'；
保存之后重新 npm run build 之后打開頁面，頁面結(jié)構(gòu)就能正常顯示出來了。
但是還有一個問題：控制臺報錯，字體圖標不能正常顯示，找不到字體文件
同樣是項目資源路徑問題：解決方法
打開項目根目錄下 build 中的 utils.js 文件，在控制 build 樣式文件代碼中添加 publicPath: '../../' ；
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 添加
})
} else {
return ['vue-style-loader'].concat(loaders)
}
保存之后重新 npm run build 并打開 dist 中的 index.html 就可以看到頁面正常顯示了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了electron最小化托盤設(shè)置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了nuxt使用vuex存儲及獲取用戶信息踩坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue路由可以幫助你在單頁應(yīng)用中管理應(yīng)用的不同頁面和頁面間的跳轉(zhuǎn),通過Vue路由,你可以實現(xiàn)頁面的動態(tài)切換和無刷新加載,提升用戶體驗和頁面性能,今天就來分享下Vue中實現(xiàn)路由跳轉(zhuǎn)的多種方式,總有一種適合你2025-07-07
本文分享如何在Vue 3中實現(xiàn)一個簡單的歌詞滾動效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了詳解如何用VUE寫一個多用模態(tài)框組件模版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue3中ref數(shù)組的監(jiān)聽實現(xiàn)方式
Vue3中監(jiān)聽ref定義的數(shù)組,需根據(jù)監(jiān)聽需求選擇合適的監(jiān)聽方法,對于空數(shù)組,推薦使用深度監(jiān)聽來捕捉數(shù)組內(nèi)部變化,同時,確保修改數(shù)組的方式是響應(yīng)式的,以保證監(jiān)聽器能正常工作,根據(jù)具體需求,可以選擇直接深度監(jiān)聽、監(jiān)聽數(shù)組長度變化或提取屬性監(jiān)聽等方案2025-10-10
這篇文章主要為大家詳細介紹了Vue Router初始化路由信息的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解一下2023-11-11
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動態(tài)路由傳參
這篇文章主要介紹了Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動態(tài)路由傳參 + 普通路由傳參),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-05-05