淺談vue項(xiàng)目如何打包扔向服務(wù)器
當(dāng)我們將 vue 項(xiàng)目完成后,面臨的就是如何將項(xiàng)目進(jìn)行打包上線,放到服務(wù)器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將項(xiàng)目進(jìn)行打包,并放到 tomcat 上。
如果是 vue-cli (非 simple 腳手架),這篇文章可能有點(diǎn)幫助。地址鏈接:vue-cli 如何打包上線
先來(lái)描述一下期間遇到的問(wèn)題有哪些:
1、打包后將 dist 文件夾和 index.html 放到 tomcat,在瀏覽器中訪問(wèn)時(shí),出現(xiàn)空白頁(yè),f12 提示 404。
2、打包好的靜態(tài)資源均是絕對(duì)路徑,無(wú)法引入進(jìn)項(xiàng)目,也是 404。
1、項(xiàng)目目錄結(jié)構(gòu)
這是打包后的,所以有 dist 文件夾,打包方式:npm run build。
2、webpack.config.js
這里只是一小部分,因?yàn)檫@邊最關(guān)鍵的就是 publicPath,下面會(huì)提,這邊可以解決靜態(tài)資源 404 無(wú)法引入的問(wèn)題。
3、npm run build 打包后的文件。
npm run build 打包后生成一個(gè) dist 文件夾,這里面的目錄:
我對(duì) webpack 打包工具的原理不是很清楚,所以文件夾應(yīng)該生成什么不是了解。我這邊是這樣子的。主要是一個(gè)主要的 build.js, 因?yàn)槲覀兊?index.html 引入的就是這個(gè) js 文件。還有一些圖片文件和 ElementUI 生成的 ttf 和 woff。
4、如何放到服務(wù)器中。
接下來(lái)就是需要將生成的 dist 文件夾和 index.html 文件放到服務(wù)器中,只需要這兩個(gè)。首先我將這兩個(gè)文件放在同一個(gè)文件夾中,我命名為 gas(隨意)。
然后將文件夾放到 tomcat 中,我將文件夾放到 tomcat 的 webapps 文件夾目錄下:
ok 部署完成,啟動(dòng) tomcat,你會(huì)發(fā)現(xiàn)顯示一個(gè)空白頁(yè),一些靜態(tài)資源都是 404。
5、解決空白頁(yè)和靜態(tài)資源無(wú)法引入的問(wèn)題。
1、首先空白頁(yè)的問(wèn)題,可以重 f12 中看出來(lái)都是絕對(duì)路徑的原因,而我們打包后,應(yīng)該的引入路徑是相對(duì)路徑,這時(shí)我們需要的是修改 index.html 頁(yè)面。
看一下沒(méi)改之前的:
看我 /dist/build.js 引用的是絕對(duì)路徑,這就導(dǎo)致了在 tomcat 去訪問(wèn) index.html 頁(yè)面時(shí),報(bào)404。我們需要將路徑變成相對(duì)路徑 ./dist/build/。多一個(gè)點(diǎn),很關(guān)鍵。好了到這里應(yīng)該主頁(yè)面可以顯示了。
但是你會(huì)發(fā)現(xiàn),我的靜態(tài)資源,我的圖片(不包括 img 形式的引入),例如我在 css 中 background:url() 的圖片顯示404。
2、解決靜態(tài)資源失效的問(wèn)題
這就需要修改我們的 webpack.config.js 中的 publicPath 了,默認(rèn)的 vue-cli 腳手架環(huán)境搭建好后,publicPath 是這樣的:
可以看到我們的路徑是: /dist/。所以這時(shí)候我們?nèi)绻蜷_(kāi)頁(yè)面,靜態(tài)資源的路徑都會(huì)是這樣子的,并且報(bào)錯(cuò)404:http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573
顯然可以看出和我們想要的路徑不一致,上面我貼出來(lái)的在 tomcat 的文件目錄中我將 dist 和 index.html 都放進(jìn)了一個(gè) gas 的文件夾中。所以正確的路徑應(yīng)該是這樣的:
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573
看出區(qū)別了嗎!
解決:
所以我需要改變一下 webpack.config.js 中的輸出路徑 publicPath: /gas/dist/。將最外層的文件夾路徑加進(jìn)去,這樣就可以將靜態(tài)資源引入進(jìn)項(xiàng)目了。
ok,到現(xiàn)在為止,最主要的兩個(gè)問(wèn)題解決了,一個(gè)是 index.html 空白頁(yè),另一個(gè)是 靜態(tài)資源路徑不正確的問(wèn)題。
6、index.html 頁(yè)面中的link 和 srcipt 引用的資源失效問(wèn)題:
原因還是路徑的地址不對(duì):
妥協(xié)的解決方法是:將自己引用的資源手動(dòng)放到打包出來(lái)的 dist 文件夾內(nèi),然后在 index.html 中按照 dist 的相對(duì)路徑進(jìn)行引用。
代碼中的 icon.ico 就是我手動(dòng)將 icon 圖標(biāo)放到 dist 文件夾中,然后按照對(duì)應(yīng)的引用路徑進(jìn)行引用。其他的 css 和 js 引用一樣。
7、待解決的問(wèn)題:
1、在我的項(xiàng)目中,使用了 ElementUI 框架,但是在打包放到服務(wù)器中后,發(fā)現(xiàn)按鈕樣式變了,所有的 padding 失效,所有我只能自己手動(dòng)進(jìn)行添加樣式。
2、在我的 index.html 中如果引入 link css文件時(shí),還是沒(méi)辦法引入相對(duì)路徑,所以我將 css 樣式都放到了各自的組件中的 style 中了,其他的一般都是用 npm 注入依賴的形式進(jìn)行安裝。
8、網(wǎng)上搜索到的相關(guān)問(wèn)題和解決方法。
1、求助!Vue項(xiàng)目用Webpack打包后放到服務(wù)器上,但訪問(wèn)是空白頁(yè)?弄了好久了也不知道什么原因
2、vue項(xiàng)目中,npm run build生成的index.html文件只有放在根目錄下打開(kāi)才能生效,怎么解決?
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js中的計(jì)算屬性、監(jiān)視屬性與生命周期詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺(jué)挺重要的知識(shí)點(diǎn),感覺(jué)有必要整理下來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性與生命周期的相關(guān)資料,需要的朋友可以參考下2021-06-06vue3.x中useRouter()執(zhí)行后返回值是undefined問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于vue3.x中useRouter()執(zhí)行后返回值是undefined問(wèn)題的解決方法,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3.x具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue中漸進(jìn)過(guò)渡效果實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue中漸進(jìn)過(guò)渡效果的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10使用electron-builder將項(xiàng)目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項(xiàng)目打包生成桌面程序,并可安裝程序,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08Vue 解決通過(guò)this.$refs來(lái)獲取DOM或者組件報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue 解決通過(guò)this.$refs來(lái)獲取DOM或者組件報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07Vue監(jiān)聽(tīng)數(shù)據(jù)渲染DOM完以后執(zhí)行某個(gè)函數(shù)詳解
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)數(shù)據(jù)渲染DOM完以后執(zhí)行某個(gè)函數(shù)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色
這篇文章主要介紹了vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue實(shí)現(xiàn)移動(dòng)端輕量日期組件不依賴第三方庫(kù)的方法
這篇文章主要介紹了vue 移動(dòng)端輕量日期組件不依賴第三方庫(kù),需要的朋友可以參考下2019-04-04vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07