1.vue-cli腳手架創(chuàng)建項(xiàng)目

1）進(jìn)入放項(xiàng)目的文件夾，打開命令行工具，輸入：vue init webpack mysite（其中webpack是模板名稱），會(huì)在當(dāng)前目錄下生成一個(gè)mysite項(xiàng)目文件夾

2）進(jìn)入項(xiàng)目文件：cd mysite，安裝項(xiàng)目依賴：npm install（如果失敗，則用鏡像：cnpm install）

3）啟動(dòng)項(xiàng)目npm run dev，默認(rèn)會(huì)直接打開一個(gè)頁面，或者在瀏覽器中輸入http://localhost:8080

2.修改項(xiàng)目目錄結(jié)構(gòu)，主要修改src目錄，項(xiàng)目改為二級(jí)目錄，方便后期修改與擴(kuò)展，我這里示例建有兩個(gè)頁面：

項(xiàng)目目錄結(jié)構(gòu)

3.utils.js中編寫公共方法獲取多級(jí)入口文件

utils.js

注意：

1）需要安裝node-glob， ?使用命令：npm install?node-glob --save

2）utils.js引入glob

4.修改webpack配置文件build/webpack.base.conf.js

主要添加如下：

5.修改build/webpack.dev.conf.js

添加如下代碼：

// 配置多頁面

const pages =? utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.html');

for (let pathname in pages) {

? // 配置生成的html文件，定義路徑等

? let conf = {

? ? filename: pathname + '.html',

? ? template: pages[pathname], // 模板路徑

? ? chunks: ['manifest', 'vendors', pathname], // 每個(gè)html引用的js模塊

? ? inject: true? ? ? ? ? ? ? // js插入位置

? };

? // 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對(duì)象

? devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));

}

注意：記得把原有的HtmlWebpackPlugin注釋掉

6.修改build/webpack.prod.conf.js

添加如下代碼：

//構(gòu)建生成多頁面的HtmlWebpackPlugin配置，主要是循環(huán)生成

const pages =? utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.html');

console.log(pages)

for (let pathname in pages) {

? let conf = {

? ? filename: pathname + '.html',

? ? template: pages[pathname], // 模板路徑

? ? chunks: ['manifest', 'vendor',pathname], // 每個(gè)html引用的js模塊，注意公共模板的引入

? ? inject: true,? ? ? ? ? ? ? // js插入位置

??? hash:true

? };

? webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));

}

7.修改打包配置文件config/index.js

項(xiàng)目目錄

打包資源目錄

8.編寫，各模塊代碼，運(yùn)行項(xiàng)目