vue脚手架改成vue多页面

直接进入主题：

首先：鸣谢 JayZangwill 的解答。附上他的github,参考他的也是可以的
链接：https://github.com/JayZangwill/vue-multipage

 

vue-cli脚手架搭建，是单页面，但改成多页面，就得自己手动配置

1、build/webpack.base.conf.js

/*==   修改添加  开始   ==*/
const glob = require('glob')
const entry = getEntries('./src/module/**/*.js') // 获得入口js文件
/*==   修改添加  结束   ==*/

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
/*==   修改添加  开始   ==*/
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if(/(\module\/(?:.+[^.js]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, '')]=entry;
    }
  })
  return entries;
}
/*==   修改添加  结束   ==*/


module.exports = {
  context: path.resolve(__dirname, '../'),
  // entry: {
  //   app: './src/main.js'
  // },
  /*==   修改添加  结束   ==*/
  entry,
  /*==   修改添加  结束   ==*/
  ………………
}

2:build/webpack.dev.conf.js

/*==   修改添加  开始   ==*/
const glob = require('glob')
const entry = getEntries('./src/module/**/*.html') // 获得入口hmtl文件
/*==   修改添加  结束   ==*/


 plugins: [
    ………………
    /*==   修改添加  开始   ==*/
    // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true
    // }),
    /*==   修改添加  结束   ==*/

    // copy custom static assets
     ………………


module.exports = new Promise((resolve, reject) => {
      ………………
      /*==   修改添加  开始   ==*/
      for (let pathname in entry) {
        let conf = {
          filename: `${pathname}.html`,
          template: entry[pathname],
          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'
        }
        if (pathname in devWebpackConfig.entry) {
          conf.chunks = ['manifest', 'vendor', pathname];
          conf.hash = true;
        }
        devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
      }

      /*==   修改添加  结束   ==*/

      resolve(devWebpackConfig)
    }
  })
})


文末底部：
/*==   修改添加  开始   ==*/
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(\module\/(?:.+[^.html]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, '')] = entry;
    }
  })
  return entries;
}
/*==   修改添加  结束   ==*/

3、build/webpack.prod.conf.js

/*==   修改添加  开始   ==*/
const glob = require('glob')
const entry = getEntries('./src/module/**/*.html') // 获得入口hmtl文件
/*==   修改添加  结束   ==*/


plugins: [
   …………………………
    /*==   修改添加  开始   ==*/

    // 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'
    // }),

    /*==   修改添加  结束   ==*/
   ………………
  ]

   ………………
   /*==   修改添加  开始   ==*/
for (let pathname in entry) {
  let conf = {
    filename: `${pathname}.html`,
    template: entry[pathname],
    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'
  }
  if (pathname in webpackConfig.entry) {
    conf.chunks = ['manifest', 'vendor', pathname];
    conf.hash = true;
  }
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
/*==   修改添加  结束   ==*/
   ………………



  文本底部：
  /*==   修改添加  开始   ==*/
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(\module\/(?:.+[^.html]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, '')] = entry;
    }
  })
  return entries;
}
/*==   修改添加  结束   ==*/

4、启动项目

链接：

PC端 ：http://localhost:8666/modules/backend.html

移动APP ：http://localhost:8666/modules/index.html

 

项目地址：

https://github.com/Summer-Lin/vue-multiple-page