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è)文件夾 在這個(gè)文件夾下運(yùn)行
express myProject
其中,myProject為最終服務(wù)器文件夾名稱,可自定義。
本地項(xiàng)目生成以后進(jìn)入項(xiàng)目,cd myProject
進(jìn)入項(xiàng)目之后使用 npm i 安裝依賴
到此,本地服務(wù)創(chuàng)建完成
image.png
3、運(yùn)行vue打包項(xiàng)目
將vue打包生成的dist目錄下的文件復(fù)制粘貼到上圖public目錄下(如圖所示):
image.png
然后運(yùn)行
npm start
打開瀏覽器,輸入http://localhost:3000,即可看到項(xiàng)目在上線后的效果了。