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