前提：在這里使用的是webpack模板進行搭建
第一步、安裝Vue-cli並且進行初始化
首先打開git，在里面使用npm全局安裝Vue-cli，並且進行初始化
npm i vue-cli -g
然后使用vue init <template(模板名，我這里使用的是webpack)> <項目文件夾名稱(我這里使用的是project)>初始化一個Vue項目模板
vue init webpack project
之后在模板下載時候會彈出如下配置選項
配置好后按下回車就構建完成了Vue腳手架，之后cd進入項目，並且進行node模塊的安裝npm i
cd project&&npm i
這時候Vue-cli的准備工作就完成了，這時候可以通過npm run dev進入開發環境，啟動后是這個樣子的，但是此時的腳手架的配置都是針對單頁面應用進行的，入口只有一個index.html，所以下一步就要對項目目錄的結構進行一些調整
第二步、對項目目錄進行一些調整
我們主要針對的是src目錄進行調整，首先來看看調整前的項目目錄結構
進入src文件夾中，新建一個文件夾，取名pages，用於存放頁面文件，然后在pages里面新建一個文件夾叫index用於存放首頁，然后將下圖紅框內的文件(文件夾)都拉進index文件夾里面，還有最外層的index.html也拉進去
這時候的src文件夾里面只有兩個文件夾一個是components用於存放組件文件，pages用於存放頁面，然后新建一個modules文件夾用於存放自己寫的頁面模塊
最后進入index文件夾，將里面的main.js改成index.js，保證頁面的入口js文件和模板文件的名稱一致
這時候的項目目錄結構接調整完畢了
第三步、對相應的配置文件進行修改
-
首先進入build文件夾下的utils文件中進行修改
在utils文件中添加兩個函數
// glob是webpack安裝時依賴的一個第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件 var glob = require('glob') // 頁面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') // 取得相應的頁面路徑，因為之前的配置，所以是src文件夾下的pages文件夾 var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 用於做相應的merge處理 var merge = require('webpack-merge') //多入口配置 // 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js后綴文件，如果該文件存在 // 那么就作為入口處理 exports.entries = function() { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map } //多頁面輸出配置 // 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html后綴文件，然后放入數組中 exports.htmlPlugin = function() { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板來源 template: filePath, // 文件名稱 filename: filename + '.html', // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr } -
修改build/webpack.base.conf.js的入口配置
找到這一段，並且修改為
-
修改build/webpack.dev.conf.js（開發環境）和build/webpack.prod.conf.js（生產環境）的多頁面配置
1.開發環境build/webpack.dev.conf.js
找到該段並且注釋掉，然后在后面添加.concat(utils.htmlPlugin())
2.生產環境webpack.prod.conf.js
注釋掉這段，並且在后面添加.concat(utils.htmlPlugin())
第四步、對頁面應用配置已基本完成，進行測試
這時候可以在pages里面添加一個test文件夾，在test文件夾里面創建一個html文件作為測試頁面
然后重新npm run dev打開開發環境，在路徑中輸入test.html，如果能進入test頁面，那么就多頁面應用的配置就成功了
