vue-cli搭建多頁面項目如何配置

這裏使用的是webpack模板。

首先安裝vue-cli，執行命令 npm install vue-cli -g；

安裝完成後初始化一個項目模板：vue init webpack myproject;(命令原格式爲：vue init <template-name> <project-name> 模板有6種能夠去vue-cli的github瞭解，地址：https://github.com/vuejs/vue-cli。）

1，安裝glob模塊 npm install glob --save-dev

2，安裝完成後，到build文件夾下找到until.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文件，做以下修改：

var HtmlWebpackPlugin = require('html-webpack-plugin') //新增

　修改入口前：

entry: {
  app: './src/main.js'
}

修改後

entry: utils.getEntries('./src/module/**/*.js')

在文件尾部代碼加上多頁面的方法

/*用於構建多頁面*/
var pages = utils.getEntries('./src/modules/**/*.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))
}

4，打開webpack.dev.conf和webpack.prod.conf文件，將HtmlWebpackPlugin註釋掉，以下圖：

 

 

 5，修改目錄結構，以下：

　　在src文件下建立文件夾modules（名字能夠自定義，注意此處名字關聯配置文件中的入口路徑）

 　　　　　　　　

6.執行npm run dev可運行項目，執行npm run build打包項目（打包後css和js路徑有問題，可修改config文件夾下index.js文件，以下：

）

 參考原文章地址：http://www.cnblogs.com/star-wind/p/6738893.html