Vue Build后的項目的根路徑配置方式
Vue Build后的項目的根路徑配置問題
問題描述
使用Vue-cli 版本v3.12.1，build之后默認(rèn)的根目錄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)就能正常顯示出來了。
但是還有一個問題：控制臺報錯，字體圖標(biāo)不能正常顯示，找不到字體文件
同樣是項目資源路徑問題：解決方法
打開項目根目錄下 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)文章
本篇文章主要介紹了Vue 兄弟組件通信的方法（不使用Vuex），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
老虎機(jī)在很多地方都可以見到，可以設(shè)置中獎位置，以及中獎回調(diào)，本文主要介紹了VUE 實現(xiàn)一個簡易老虎機(jī)的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中keep-alive組件的作用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了vue?parseHTML函數(shù)的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue+element項目中過濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項目中過濾輸入框特殊字符小結(jié)，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在Vue中實現(xiàn)隨hash改變響應(yīng)菜單高亮
這篇文章主要介紹了在Vue中實現(xiàn)隨hash改變響應(yīng)菜單高亮的方法，文中還通過實例代碼給大家介紹了vue關(guān)于點(diǎn)擊菜單高亮與組件切換的相關(guān)知識,需要的朋友可以參考下2020-03-03
Vue實現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09