vue項目通過webpack打包生成的dist文件放到express環境里運行(vue+webpack+express)


1.首先需要的原料肯定是vue打包生成的dist文件

在vue項目目錄下運行:npm run build,等待運行結束,會在項目目錄下生成一個dist文件夾,里面會生成一些文件(如下圖示)

小的項目文件會少些、、

2.安裝express本地服務器

能運行起來npm run build我就默認大家不是小白嘍,這邊同樣需要node環境,在環境中運行

npm install -g express-generator

等待安裝完畢,可通過運行:express --version驗證express是否安裝成功(如下圖示)

3.創建本地服務器(應用)

在我的電腦某盤符下,運行

express myProject

其中的myProject即為最終的服務器文件夾名稱,可自定義。

等待安裝完成,運行

cd myProject

進入項目,安裝依賴

npm i

到此,本地服務器創建完成。打開服務器目錄(如下圖示)

4.運行vue打包項目

 將vue打包生成的dist文件夾下的文件復制、粘貼至上圖示中的public目錄下(如下圖示)

箭頭所指為dist目錄下文件(項目內容不同,生成文件會有所不同),其余為默認文件,不用理會。

此時,運行

npm start

然后打開瀏覽器,輸入http://localhost:3000,即可看到項目在上線后的效果了。

 

另一種簡單的方法,使用live-server第三方包。

首先全局安裝live-server: npm install -g live-server

然后在打包好的目錄下運行:live-server --port=9527

項目就會自動打開,超級方便吧!

 

后記:查看本機全局安裝的npm包命令:npm list -g --depth 0

 

到此vue打包后的項目即可在本地預覽,全篇結束。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM