如何本地運行vue dist文件

Posted on by

本地運行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} 開啟成功!`))

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

  • port 不要與已存在端口沖突。
  • 若打包文件夾 dist 在項目根目錄，直接 app.use(express.static('dist')) 就行瞭；
  • 若打包文件夾 dist 不在項目根目錄，就自行調整，如：app.use(express.static('/sty/dist'))。

2. 在項目根目錄下運行 node 命令啟動 server.js 文件：

node server.js

成功就會提示服務器開啟成功：

提示成功

如果未開啟服務器成功，很可能是因為你沒裝 express，此時運行 npm i express 安裝下即可

3. 到此，隻要在瀏覽器輸入：http://localhost:8012 即可預覽 dist 文件夾的打包

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：