天天看點

Vue3 項目打包

打包 Vue 項目使用以下指令:

執行以上指令,輸出結果如下:

Vue3 項目打包

執行完成後,會在 Vue 項目下會生成一個 dist 目錄,該目錄一般包含 index.html 檔案及 static 目錄,static 目錄包含了靜态檔案 js、css 以及圖檔目錄 images(如果有圖檔的話)。

Vue3 項目打包

如果直接輕按兩下打開 index.html,在浏覽器中頁面可能是空白了,要正常顯示則需要修改下 index.html 檔案中 js、css 檔案路徑。

例如我們打開 dist/index.html 檔案看到 css 和 js 檔案路徑是絕對路徑:

我們把 js、css 檔案路徑修改為相對路徑:

這樣直接輕按兩下 dist/index.html 檔案就可以在浏覽器中看到效果了。