本地運(yùn)行vue dist文件

vue打包命令 npm run build

運(yùn)行這個(gè)命令會(huì)在目錄中生成一個(gè)dist文件夾

在服務(wù)器部署vue項(xiàng)目只需要把這個(gè)文件夾給后臺就可以了

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

靜態(tài)資源路徑問題——空白頁面

解決方法：

1.打開腳手架的config文件中的index.js文件，

把build對象內(nèi)的assetsPublicPath(發(fā)布路徑)改為"./"。

默認(rèn)的情況下是"/"，但是"/“是絕對路徑，而”./"是相對路徑

dist文件在本地運(yùn)行

因?yàn)閐ist文件是要有服務(wù)啟動(dòng)的，所以需要在本地啟動(dòng)服務(wù)

vue項(xiàng)目通過webpack打包生成的dist文件放到express環(huán)境里運(yùn)行（vue+webpack+express）

解決方案：

1.安裝express本地服務(wù)器

npm install -g express-generator

安裝完畢之后可以通過 express --version驗(yàn)證express是否安裝成功

2.創(chuàng)建本地服務(wù)器

在某個(gè)盤符下運(yùn)行

express myProject

其中，myProject為最終服務(wù)器文件夾名稱，可自定義。

本地項(xiàng)目生成以后進(jìn)入項(xiàng)目，cd myProject

進(jìn)入項(xiàng)目之后使用 npm i 安裝依賴

到此，本地服務(wù)創(chuàng)建完成

3.運(yùn)行vue打包項(xiàng)目

將vue打包生成的dist目錄下的文件復(fù)制粘貼到上圖public目錄下（如圖所示）：

然后運(yùn)行

npm start

打開瀏覽器，輸入http://localhost:3000，即可看到項(xiàng)目在上線后的效果了。

運(yùn)行dist打包文件：簡單得很!!!

項(xiàng)目打包完成后，會(huì)生成 dist 文件夾，如何檢驗(yàn) dist 文件夾呢？

1. 一般打包完成后會(huì)在項(xiàng)目根目錄生成一個(gè) dist 文件夾，此時(shí)，我們在項(xiàng)目根目錄新建一個(gè) js 文件（我以 server.js 為例）

server.js 中代碼如下：

const express = require('express')
const app = express()
const port = 8012 // 自定義端口號（不要與已存在端口沖突）
app.use(express.static('dist')) // dist 是項(xiàng)目的打包資源路徑
app.listen(port, () => console.log(`服務(wù)器 ${port} 開啟成功!`))

注：要改動(dòng)的就注釋的兩處：

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

2. 在項(xiàng)目根目錄下運(yùn)行 node 命令啟動(dòng) server.js 文件：

node server.js

成功就會(huì)提示服務(wù)器開啟成功：

如果未開啟服務(wù)器成功，很可能是因?yàn)槟銢]裝 express，此時(shí)運(yùn)行 npm i express 安裝下即可

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論