基於vue-cli重構多頁面腳手架

帥若浮誇發表於2018-01-23
Vue

引言

官方提供的專案生成工具vue-cli沒有對多頁面webApp的支援，但是在實際的專案中，我們需要這樣的腳手架，參考了很多大牛的方法，這裡提供了一種我的單頁面腳手架轉換為多頁面腳手架的方案，供大家參考。不好的地方也請大家指正。

準備

使用vue-cli生成一個你需要的單頁面專案腳手架，然後我們就要開始我們的改裝工程了。

重構過程

步驟一 改變目錄結構

  • step1 在src目錄下面新建views資料夾,然後再views資料夾下新建index資料夾
  • step2 將src目錄下的main.js和App.vue移動到step1中的index資料夾下，並將main.js重新命名為index.js
  • step3 將src目錄下的router資料夾移動到step1中的index資料夾下，如果不使用router可以再index.js中註釋掉，我沒有使用，因為我的每個頁面不是單頁面的應用，不必要使用路由功能
  • step4 將根目錄下的index.html檔案移動到step1中的index資料夾下

步驟二 修改build下的配置檔案

在生產環境下會分頁面打包獨有js檔案，並抽取公共js，不會什麼都打包成一坨。打包後檔案目錄結構也是比較清晰地。一下所有修改都在build資料夾下

  • step1 修改utils.js，增加兩個函式，一個用來獲取頁面多入口，一個用來輸入打包後的頁面，並注入js:
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/views')
var merge = require('webpack-merge')

//多入口配置
//獲取views資料夾下，每個頁面下的index.js作為頁面入口，故每個頁面下都必須有index.js
exports.entries = function() {
  var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
  var map = {}, tmp = [], pathname = '';
  entryFiles.forEach((filePath) => {
      var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      tmp = filePath.split('/').splice(-4)
      map[tmp[2] + '/' + filename] = filePath
  })
  return map
}

//多頁面輸出配置
//讀取views資料夾下的對應每個頁面的html字尾檔案，然後放入陣列中
//如果想要更深的定製或者修改，建議大家看一下CommonsChunkPlugin
//推薦一個基礎的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
      let jsPath = '', tmp = [];
      let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      tmp = filePath.split('/').splice(-4)
      jsPath = tmp[2] + '/' + 'index'
      let conf = {
          template: filePath,
          filename: filename + '.html',
          chunks: ['manifest', 'vendors', jsPath],
          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
}

複製程式碼
  • step2 修改webpack.base.conf.js檔案配置的入口
// entry: {
//     app: './src/main.js'
// },
entry: utils.entries(),
複製程式碼
  • step3 修改webpack.dev.conf.js檔案的打包方法 找到下面的程式碼，將其註釋掉：
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),
複製程式碼

在plugins這個屬性值的後面加上我們上面的方法，下面是程式碼片段：

	 // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true
    // }),
    new FriendlyErrorsPlugin()
  ].concat(utils.htmlPlugin())
複製程式碼
  • step4 修改webpack.prod.conf.js 找到下面的程式碼，註釋掉：
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
複製程式碼

在plugins這個屬性值的後面加上我們上面的方法，下面是程式碼片段：

	 new CopyWebpackPlugin([{
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
        }])
    ].concat(utils.htmlPlugin())
複製程式碼

配置完成。正常啟動專案即可。

後記

一開始我也是扒了網上的一些方案來使用，但是畢竟大家都是根據自己的需求來進行專案的重構的，如果本方案不符合你的要求，建議大家還是要根據自己的需求進行定製化的修改。這裡只是跟大家分享一下我的方案。後續我會將程式碼發到github上供後來者參考。有什麼問題大家可以發郵件討論，我會及時回覆。 Mail：Shuai.XUE@supinfo.com

Demo

下面是github上的專案地址,供大家參考： vue-multipage

這個腳手架在原有的基礎上，加入了更多地服務：

  • mock服務，能控制到模組級別
  • 使用axios封裝了ajax的基礎get，post方法可供呼叫
  • 加入了vuex，並進行模組拆分
  • 優化了目錄結構，介面資訊統一配置

具體的可以看專案的程式碼，如果不符合需要，可以修改，也希望大家能夠指出不足的地方。這裡只是給大家提供了一種方案和思路，適合自己的才是最好的。

相關文章