十二 VueJs 填坑日記之專案打包發布

2021-09-25 22:44:09 字數 2303 閱讀 1539

打包專案

進入到我們的專案根目錄

d:

cd vueworks/my-vue

然後執行如下**,進行打包:

npm run build
結果如下:

現在我們已經把專案打包好,打完好的專案預設位置在/dist資料夾裡。

我們從打包時的cmd的日誌來看,裡面有很多的map檔案的生成,由於截圖有限,上面只是擷取了結尾,大家可以向上滾動一下,就可以看到,如果專案比較大的時候,這些檔案乙個是比較大,另乙個就是編譯比較慢。所以我們把這些map檔案去掉。

去掉 map 檔案

開啟 /config/index.js 檔案,找到其中的productionsourcemap: true,大根在build下。預設是true,修改為false:

productionsourcemap: false,
然後重新打包

大家可以看日誌,這次map檔案已經沒有了,到這裡我們就完成了專案的打包。上面有個tip,提示我們打包完的專案,必須要在http server下才能執行。

安裝http server

我們進入 dist 資料夾,然後啟動乙個 http 服務,來看看可以不可以訪問。你可能不知道如何啟動這樣乙個 http 服務,或者,你現在已經到 apache 裡面去進行配置去了。不用那麼麻煩,我們有 nodejs 環境,只要全域性安裝乙個 http-server 服務就好了呀。

在安裝的過程,大家可以用cnpm來代替npm。在windows上安裝完,直接就可以執行了。切換到dist目錄,執行

如果你是嚴格按照我的教程來的,那麼現在已經可以順利的跑起來了。我們在瀏覽器中輸入 就應該可以訪問了。當然,會報錯,說是介面找不到,404錯誤。因為我們把介面給通過**的方式開啟到了本地,但是這裡我們並沒有開啟**,所以就跑不起來了。很正常的。這是因為示例的介面的問題。實際開發你還要按照我的這個做。只不過,最終**放到真實的伺服器環境去和後端介面在乙個 http服務下面的話,就不存在這個問題了。

將專案打包到子目錄

剛剛,我們是將檔案,打包為根目錄訪問的。也就是說,必須在 dist 資料夾下面啟動乙個服務,才能把專案跑起來。

但是我們開發的大多數專案,可能是必須跑在二級目錄,甚至更深層次的目錄的。怎麼做呢?

我們編輯 config/index.js 檔案,找到assetspublicpath: '/',把/修改為我們的子目錄的路徑就行了,這裡我要放到wemz,於是,我修改為如下**:

assetspublicpath: '/wemz/',
然後,重新執行

npm run build
還記得,我們在專案資料夾中用 npm run dev 就可以開啟乙個 http 服務嗎?並且那裡,我們還**了介面的。我們就這麼做。然後我們訪問二級目錄 /dist/ 我們就可以看到效果了。

注意,我訪問的不是根目錄,而是 /wemz/ 這個子目錄哦,這裡是訪問的我們打包的檔案的。雖然實際生成的檔案還是在dist目錄裡,但是wemz這個目錄就可以訪問了。將來也可以直接將dist目錄下的所有檔案複製到所有伺服器上的/wemz的目錄裡。

最後附上**的git:

八 VueJs 填坑日記之引數傳遞及內容頁面的開發

編寫內容頁面 還是廢話少說,先上 將以下 儲存到 src pages content.vue中 關於樣式的東西,咱們後期整合amaze ui的時候再來實現,暫時只實現功能。重點分析 其他的內容,我們在列表頁面已經見過了。這裡第一次出現 這個東西。同樣是渲染內容,v html 和 v text 有什麼...

Pdfjs dist 填坑日記

vue mobile 專案中乙個需求是預覽pdf,需要能加水印,可以縮放,另外需要無汙染零新增。找到了pdfjs dist。h5實現,功能比較強大。文件真的一般。網上找了個例子,寫上,發現好用。let vm this let url xx var canvas document.getelement...

Git填坑日記

問題 cmd命令列在進行http傳輸的時候輸不了密碼 解決 使用git bash來輸入 問題 git在通過http clone的時候使用者名稱是你的登入時的使用者名稱,密碼是你自己另外設定的密碼 問題 git最常用的指令 add commit push 解決 如果提示沒東西push的話你一定是忘了之...