詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行

親測，webpack打包vue項目之后生成的dist文件可以部署到 express 服務器上運行。

我的vue項目結構如下：

1. 進入該vue項目目錄，執行：npm run build(在package.json的scripts配置)

執行成功如下圖所示：

然后此時你會發現項目下多了一個 dist 文件夾，dist下文件便是項目打包之后生成的文件。

此時我們直接在瀏覽器中打開index.html，是會報錯的，什么都看不到。

2. 安裝express-generator生成器

執行 $ npm install express-generator -g 進行安裝

3. 創建一個express項目

執行 $ express expressDemo （expressDemo是項目名）

4. 進入expressDemo目錄，安裝項目依賴

$ cd expressDemo                                        
$ npm install

5. 把dist目錄下的所有文件復制到express項目的public文件夾下

然后運行 $ npm start 啟動expressDemo

打開瀏覽器，輸入 http://localhost:3000 , 就可以看到效果了

方案二

1. 安裝http-server 通過npm install -g http-server 進行全局安裝

2. 通過命令行進入到dist文件夾 執行 npx http-server