vue項(xiàng)目怎么打包扔向服務(wù)器-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)vue項(xiàng)目怎么打包扔向服務(wù)器，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為烏審企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，烏審網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

當(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 如何打包上線

先來描述一下期間遇到的問題有哪些：

1、打包后將 dist 文件夾和 index.html 放到 tomcat，在瀏覽器中訪問時(shí)，出現(xiàn)空白頁，f12 提示 404。
2、打包好的靜態(tài)資源均是絕對路徑，無法引入進(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 無法引入的問題。

3、npm run build 打包后的文件。

npm run build 打包后生成一個(gè) dist 文件夾，這里面的目錄：

我對 webpack 打包工具的原理不是很清楚，所以文件夾應(yīng)該生成什么不是了解。我這邊是這樣子的。主要是一個(gè)主要的 build.js, 因?yàn)槲覀兊?index.html 引入的就是這個(gè) js 文件。還有一些圖片文件和 ElementUI 生成的 ttf 和 woff。

4、如何放到服務(wù)器中。

接下來就是需要將生成的 dist 文件夾和 index.html 文件放到服務(wù)器中，只需要這兩個(gè)。首先我將這兩個(gè)文件放在同一個(gè)文件夾中，我命名為 gas（隨意）。

然后將文件夾放到 tomcat 中，我將文件夾放到 tomcat 的 webapps 文件夾目錄下：

ok 部署完成,啟動(dòng) tomcat，你會(huì)發(fā)現(xiàn)顯示一個(gè)空白頁，一些靜態(tài)資源都是 404。

5、解決空白頁和靜態(tài)資源無法引入的問題。

1、首先空白頁的問題，可以重 f12 中看出來都是絕對路徑的原因，而我們打包后，應(yīng)該的引入路徑是相對路徑，這時(shí)我們需要的是修改 index.html 頁面。

看一下沒改之前的：

看我 /dist/build.js 引用的是絕對路徑，這就導(dǎo)致了在 tomcat 去訪問 index.html 頁面時(shí)，報(bào)404。我們需要將路徑變成相對路徑 ./dist/build/。多一個(gè)點(diǎn)，很關(guān)鍵。好了到這里應(yīng)該主頁面可以顯示了。

但是你會(huì)發(fā)現(xiàn)，我的靜態(tài)資源，我的圖片（不包括 img 形式的引入），例如我在 css 中 background:url() 的圖片顯示404。

2、解決靜態(tài)資源失效的問題

這就需要修改我們的 webpack.config.js 中的 publicPath 了，默認(rèn)的 vue-cli 腳手架環(huán)境搭建好后，publicPath 是這樣的：

可以看到我們的路徑是： /dist/。所以這時(shí)候我們?nèi)绻蜷_頁面，靜態(tài)資源的路徑都會(huì)是這樣子的，并且報(bào)錯(cuò)404：http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573

顯然可以看出和我們想要的路徑不一致，上面我貼出來的在 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è)問題解決了，一個(gè)是 index.html 空白頁，另一個(gè)是 靜態(tài)資源路徑不正確的問題。

6、index.html 頁面中的link 和 srcipt 引用的資源失效問題：

原因還是路徑的地址不對：

妥協(xié)的解決方法是：將自己引用的資源手動(dòng)放到打包出來的 dist 文件夾內(nèi)，然后在 index.html 中按照 dist 的相對路徑進(jìn)行引用。

代碼中的 icon.ico 就是我手動(dòng)將 icon 圖標(biāo)放到 dist 文件夾中，然后按照對應(yīng)的引用路徑進(jìn)行引用。其他的 css 和 js 引用一樣。

7、待解決的問題：

1、在我的項(xiàng)目中，使用了 ElementUI 框架，但是在打包放到服務(wù)器中后，發(fā)現(xiàn)按鈕樣式變了，所有的 padding 失效，所有我只能自己手動(dòng)進(jìn)行添加樣式。

2、在我的 index.html 中如果引入 link css文件時(shí)，還是沒辦法引入相對路徑，所以我將 css 樣式都放到了各自的組件中的 style 中了，其他的一般都是用 npm 注入依賴的形式進(jìn)行安裝。

8、網(wǎng)上搜索到的相關(guān)問題和解決方法。

1、求助！Vue項(xiàng)目用Webpack打包后放到服務(wù)器上，但訪問是空白頁？弄了好久了也不知道什么原因

2、vue項(xiàng)目中，npm run build生成的index.html文件只有放在根目錄下打開才能生效，怎么解決？

3、Vue應(yīng)用部署到服務(wù)器的正確方式

關(guān)于“vue項(xiàng)目怎么打包扔向服務(wù)器”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：vue項(xiàng)目怎么打包扔向服務(wù)器-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article18/ceccdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、全網(wǎng)營銷推廣、服務(wù)器托管、定制網(wǎng)站、網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)