如何本地執行vue dist檔案

2022-05-24 18:01:47

本地執行vue dist檔案

vue打包命令 npm run build

執行這個命令會在目錄中生成一個dist資料夾

在伺服器部署vue專案只需要把這個資料夾給後臺就可以了

但是打包之後我們需要在本地先自測一下，下面就是踩過的一些坑：

靜態資源路徑問題——空白頁面

解決方法：

1.開啟腳手架的config檔案中的index.js檔案，

把build物件內的assetsPublicPath(釋出路徑)改為"./"。

預設的情況下是"/"，但是"/“是絕對路徑，而”./"是相對路徑

dist檔案在本地執行

因為dist檔案是要有服務啟動的，所以需要在本地啟動服務

vue專案通過webpack打包生成的dist檔案放到express環境裡執行（vue+webpack+express）

解決方案：

1.安裝express本地伺服器

npm install -g express-generator

安裝完畢之後可以通過 express --version驗證express是否安裝成功

2.建立本地伺服器

在某個碟符下執行

express myProject

其中，myProject為最終伺服器資料夾名稱，可自定義。

本地專案生成以後進入專案，cd myProject

進入專案之後使用 npm i 安裝依賴

到此，本地服務建立完成

3.執行vue打包專案

將vue打包生成的dist目錄下的檔案複製貼上到上圖public目錄下（如圖所示）：

然後執行

npm start

開啟瀏覽器，輸入http://localhost:3000，即可看到專案在上線後的效果了。

執行dist打包檔案：簡單得很!!!

專案打包完成後，會生成 dist 資料夾，如何檢驗 dist 資料夾呢？

1. 一般打包完成後會在專案根目錄生成一個 dist 資料夾，此時，我們在專案根目錄新建一個 js 檔案（我以 server.js 為例）

server.js 中程式碼如下：

const express = require('express')
const app = express()
const port = 8012 // 自定義埠號（不要與已存在埠衝突）
app.use(express.static('dist')) // dist 是專案的打包資源路徑
app.listen(port, () => console.log(`伺服器 ${port} 開啟成功!`))

注：要改動的就註釋的兩處：