使用vue-cli構建多頁面應用+vux（二）

當我們安裝好vue-cli完整的項目以后，我們開始對它進行改造，此處參考了簡書某個作者的，附上原文鏈接 http://www.jianshu.com/p/43697bdee974以及此文例子地址https://github.com/qianyinghuanmie/vue-cli-

1 先安裝glob模塊 npm install glob --save-dev;

 

2 安裝完畢在bulid文件夾找到utils.js文件修改，修改內容如下：

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注釋掉，如下圖

webpack.prod.conf也是一樣的，就不再貼圖了

 4.配置路由，在初始化項目的時候，選擇了使用vue-router

我們先稍微修改下目錄結構，在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-