基于配置的vue多页应用开发

vue是目前灰常火的前端框架，但是我们在开发pc的web端时经常需要用到多页系统，而不是简单的单页系统，而vue-cli(最好用的脚手架)只有单页应用的的脚手架，那么我们如何配置一个自己能用的vue多页应用的脚手架呢？

本文 使用 vue-cli#2.x，
如使用@vue/cli#3.x请前往 VUE多页应用升级--TO(@vue/cli#3.x)

先上图

vue的项目结构

vue编译打包后的项目结构图

访问期望图

DIY开始

1.vue-cli 初始化一个项目

Paste_Image.png

2.改造 config/index.js

module.exports = {
  build: {...},
  dev: {...},
  // 添加下面两项，根据自己要求配置
  pageEntry: './src/views/**/*.js' // 多页应用入口
  // pageEntry: './src/main.js' // 单页应用入口
}

3.改造 build/utils.js

安装 npm install --save-dev glob 包

var glob = require('glob') // 引入glob包

// 在exports挂上俩个方法
// 获取路口方法
exports.getEntries = function () {  
  if (!/\*/.test(config.pageEntry)) {    
    // 单页入口处理    
    return {'index': config.pageEntry}  
  } else {    
    // 多页入口处理    
    var files = glob.sync(config.pageEntry)    
    var entries = {}    
    files.forEach(function (filepath) {      
      // 取倒数第二层(view下面的文件夹)做包名     
      var split = filepath.split('/')      
      var name = split[split.length - 2]      
      entries[name] = filepath    
    })    
    return entries  
  }
}

// connect-history-api-fallback 路由重写使用，
// https://github.com/bripkens/connect-history-api-fallback
exports.getRewrites = function () {
  var entries = exports.getEntries()
  var rewrites = []

  Object.keys(entries).forEach(function (name) {
    var reg = new RegExp('^\/' + name + '$')
    rewrites.push({from: reg, to: '\/' + name + '.html'})
  })

  return rewrites
}

4.改造 build/webpack.base.conf.js

...
module.exports = {
  entry: utils.getEntries()
}
...

4.改造 build/webpack.dev.conf.js

...
module.exports = {
  ...
  plugins: [
    ...
    // https://github.com/ampedandwired/html-webpack-plugin
    /* 注释或者删除下面插件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }), */
    ...
  ]
}
...

// 添加下面的处理
var entries = utils.getEntries()
Object.keys(entries).forEach(function (name) {
  // 每个页面生成一个html
  console.log(entries[name])
  var plugin = new HtmlWebpackPlugin({
    // 输出为 模块名称+html
    filename: name + '.html',
    //(模板放置对应的目录中，若用通用模板，则写 ‘index.html’)
    template: entries[name].slice(0, -3) + '.html', 
    inject: true
  });
  module.exports.plugins.push(plugin)
})

5.改造 build/dev-server.js

// 引入utils包
var utils = require('./utils')
...
// 修改history，参数，使访问的效果如预期访问效果
// 访问xxxx/login.html -> xxxx/login
app.use(require('connect-history-api-fallback')(
  {rewrites: utils.getRewrites()}
))
...

以上是将dev开发模式改造完成

6.改造 build/webpack.prod.conf.js

...
var webpackConfig = merge(baseWebpackConfig, {
  ...
  /* 注释或者删除下面插件
  new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
  }),*/
  ...
})

// 添加下面的处理
var entries = utils.getEntries()
Object.keys(entries).forEach(function (name) {
  // 每个页面生成一个html
  var plugin = new HtmlWebpackPlugin({
    filename: name + '.html',
    template: entries[name].slice(0, -3) + '.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    // 每个包引入自己的依赖，公共依赖
    chunks: ['manifest', 'vendor', name],
    hash: true
  });

  webpackConfig.plugins.push(plugin)
})

好了改造完成，小伙伴们愉快的去玩耍吧
目前没有放到github中，有需要的联系楼主，楼主在处理