VUE 多頁面配置(二)

1. 概述

1.1 說明

　　項目開發過程中會遇到需要多個主頁展示情況，故在vue單頁面的基礎上進行配置多頁面開發以滿足此需求，此記錄為統一配置出入口。

 2. 實例

2.1 頁面配置

　　使用vue腳手架搭建后將默認index.html，app.vue，main.js三個頁面刪除，然后在src目錄下新增pages文件夾，增加所有的多頁面文件。

2.1.1 首頁一

　　src>pages>index>index.html，index.vue，index.js

2.1.2 首頁二

　　src>pages>home>home.html ，home.vue，home.js

2.1.3 頁面展示

2.2 webpack配置

2.2.1 webpack構建工具：utils.js

　　在build>utils.js中增加通用的入口文件方法與通用的頁面打包文件方法，由於現在項目的多頁面文件全部在src>pages文件夾下，所以去判斷對應的入口js文件和頁面html文件即可

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
// glob是webpack安裝時依賴的一個第三方模塊，該模塊允許使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件
let glob = require('glob');
let HtmlWebpackPlugin = require('html-webpack-plugin');// 頁面模板
let pagesPath = path.resolve(__dirname, '../src/pages');// 多頁面路徑
let merge = require('webpack-merge');// 用於做相應的merge處理

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}
/**
 * 多入口配置
 * 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js后綴文件
 * 當文件存在就為某一入口
 **/
exports.entries = function () {
  let entryFiles = glob.sync(pagesPath + '/*/*.js');
  let map = {}
  entryFiles.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    map[filename] = filePath
  });
  return map
};
/**
 * 多頁面輸出配置
 * 通過glob模塊讀取pages文件夾下的所有對應文件夾下的html后綴文件
 * 當文件存在就為某一出口
 **/
exports.htmlPlugin = function () {
  let entryHtml = glob.sync(pagesPath + '/*/*.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]
    };
    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
};

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

2.2.2 webpack基礎配置：webpack.base.conf.js

　　把原有入口配置更改為調用通用入口配置：utils.entries()

entry: utils.entries(),

2.2.3 webpack開發環境配置：webpack.dev.conf.js

　　把原有單頁面打包更改為調取通用打包，增加至插件中。

 plugins: [
***
  ].concat(utils.htmlPlugin())

2.2.4 webpack生產環境配置：index.js與webpack.prod.conf.js

　　*** config>index.js進行打包基礎配置

　　

　　*** build>webpack.prod.conf.js 進行打包配置

　　把原有單頁面打包更改為調取通用打包，增加至插件中。

  plugins: [
***
  ].concat(utils.htmlPlugin())

　　注意：打包后可安裝http-server進行訪問打包好的文件dist：http-server ./dist ；若沒有安裝依賴可使用命令安裝： npm install http-server -g