當咱們安裝好vue-cli完整的項目之後,咱們開始對它進行改造,此處參考了簡書某個做者的,附上原文連接 http://www.jianshu.com/p/43697bdee974以及此文例子地址https://github.com/qianyinghuanmie/vue-cli-html
1 先安裝glob模塊 npm install glob --save-dev;vue
2 安裝完畢在bulid文件夾找到utils.js文件修改,修改內容以下:webpack
var glob = require('glob'); //新增 var HtmlWebpackPlugin = require('html-webpack-plugin') //新增 /*用於多頁面的模板*/ exports.getEntries = function (globPath) { var entries = {} /** * 讀取src目錄,並進行路徑裁剪 */ glob.sync(globPath).forEach(function (entry) { /** * path.basename 提取出用 ‘/' 隔開的path的最後一部分,除第一個參數外其他是須要過濾的字符串 * path.extname 獲取文件後綴 */ var basename = path.basename(entry, path.extname(entry), 'router.js') // 過濾router.js // ***************begin*************** // 固然, 你也能夠加上模塊名稱, 即輸出以下: { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' } // 最終編譯輸出的文件也在module目錄下, 訪問路徑須要時 localhost:8080/module/index.html // slice 從已有的數組中返回選定的元素, -3 倒序選擇,即選擇最後三個 // var tmp = entry.split('/').splice(-3) // var pathname = tmp.splice(0, 1) + '/' + basename; // splice(0, 1)取tmp數組中第一個元素 // console.log(pathname) // entries[pathname] = entry // ***************end*************** entries[basename] = entry }); // console.log(entries); // 獲取的主入口以下: { main: './src/module/index/main.js', test: './src/module/test/test.js' } return entries; } //新增
3 對webpack.base.conf.js進行改造
將原入口代碼進行修改
entry: { app: './src/main.js' }
修改後
entry: utils.getEntries('./src/module/**/*.js')
在文件尾部代碼加上多頁面的方法
/*用於構建多頁面*/ var pages = utils.getEntries('./src/module/**/*.html') for(var page in pages) { // 配置生成的html文件,定義路徑等 var conf = { filename: page + '.html', template: pages[page], //模板路徑 inject: true, // excludeChunks 容許跳過某些chunks, 而chunks告訴插件要引用entry裏面的哪幾個入口 // 如何更好的理解這塊呢?舉個例子:好比本demo中包含兩個模塊(index和about),最好的固然是各個模塊引入本身所需的js, // 而不是每一個頁面都引入全部的js,你能夠把下面這個excludeChunks去掉,而後npm run build,而後看編譯出來的index.html和about.html就知道了 // filter:將數據過濾,而後返回符合要求的數據,Object.keys是獲取JSON對象中的每一個key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }) } // 須要生成幾個html文件,就配置幾個HtmlWebpackPlugin對象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }
因爲初始化的項目,沒有plugins參數,給他加上,以避免上面方法執行出錯。
除此以外,打開webpack.dev.conf和webpack.prod.conf文件,將HtmlWebpackPlugin註釋掉,以下圖git
webpack.prod.conf也是同樣的,就再也不貼圖了github
4.配置路由,在初始化項目的時候,選擇了使用vue-routerweb
咱們先稍微修改下目錄結構,在src目錄下建立 module目錄,分別在module創建各入口的文下,將以前的入口文件刪除,以下圖所示。
咱們找到index中index.js文件,所有內容以下
import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' Vue.config.productionTip = false Vue.use(VueRouter) const routes = [{ path: '/', component: function (resolve) { require(['../../components/demo1.vue'], resolve) } }, { path: '/demo1', component: function (resolve) { require(['../../components/demo1.vue'], resolve) } }, { path: '/demo2', component: function (resolve) { require(['../../components/demo2.vue'], resolve) } }] const router = new VueRouter({ routes }) /* eslint-disable no-new */ new Vue({ router, render: h => h(App) }).$mount('#app')
………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
about.js中與index.js相似
最後再運行npm run dev 便可
這是個人例子 https://github.com/qianyinghuanmie/vue-cli-