問題引入：

在vue專案中，我們通常使用vue-cli腳手架生成專案，生成的是一個單頁面的工程，main.js是整個專案唯一的入口，整個專案都在一個index.html外殼中。

但是，有時候，這種預設結構不能滿足專案需要

1. 大專案使用單頁面負載過重
2. 多頁面利於模組獨立部署

所以，我們需要將專案配置成多入口多出口模式

配置方法：

• 修改腳手架生成的目錄結構如下：

其中view資料夾中放置新增的多頁面

以Multi1為例:

1．新增HTML檔案

2.為該頁面新增一個專屬的入口檔案，注意id保持一致

3.新增.vue檔案

• 在utils.js中新增工具函式，動態讀取view資料夾中的入口檔名稱

• 改造webpack配置檔案

1．修改webpack.base.conf.js

原來只有main.js一個入口檔案,現在我們需要將新增的Muiti1中的Test1.js和Muiti2中的Test2.js也放入入口檔案配置處，修改entry配置，讀取所有入口檔案

2．修改webpack.dev.conf.js

3．修改webpack.prod.conf.js

4．配置完成，執行專案，開啟預設頁面，這是單頁面

5.下面，測試另兩個單獨入口的頁面生成成功與否，輸入如下地址,頁面顯示成功

Test1.html:

Test2.html

6．測試打包情況

成功打出三個html

成功打出各自對應的js

多入口配置成功！