欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談vue項目如何打包扔向服務(wù)器

 更新時間:2018年05月08日 09:40:58   作者:Hi-Sen  
本篇文章主要介紹了淺談vue項目如何打包扔向服務(wù)器,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

當我們將 vue 項目完成后,面臨的就是如何將項目進行打包上線,放到服務(wù)器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將項目進行打包,并放到 tomcat 上。 

如果是 vue-cli (非 simple 腳手架),這篇文章可能有點幫助。地址鏈接:vue-cli 如何打包上線

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

1、打包后將 dist 文件夾和 index.html 放到 tomcat,在瀏覽器中訪問時,出現(xiàn)空白頁,f12 提示 404。
2、打包好的靜態(tài)資源均是絕對路徑,無法引入進項目,也是 404。

1、項目目錄結(jié)構(gòu)

這是打包后的,所以有 dist 文件夾,打包方式:npm run build。

2、webpack.config.js

這里只是一小部分,因為這邊最關(guān)鍵的就是 publicPath,下面會提,這邊可以解決靜態(tài)資源 404 無法引入的問題。

3、npm run build 打包后的文件

npm run build 打包后生成一個 dist 文件夾,這里面的目錄:

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

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

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

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

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

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

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

看一下沒改之前的:

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

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

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

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

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

顯然可以看出和我們想要的路徑不一致,上面我貼出來的在 tomcat 的文件目錄中我將 dist 和 index.html 都放進了一個 gas 的文件夾中。所以正確的路徑應(yīng)該是這樣的:
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573

看出區(qū)別了嗎!

解決:

所以我需要改變一下 webpack.config.js 中的輸出路徑 publicPath: /gas/dist/。將最外層的文件夾路徑加進去,這樣就可以將靜態(tài)資源引入進項目了。

ok,到現(xiàn)在為止,最主要的兩個問題解決了,一個是 index.html 空白頁,另一個是 靜態(tài)資源路徑不正確的問題。

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

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

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

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

7、待解決的問題:

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

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

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

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

2、vue項目中,npm run build生成的index.html文件只有放在根目錄下打開才能生效,怎么解決?

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

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

相關(guān)文章

最新評論