基于vue-cli重构多页面脚手架-白红宇

引言

官方提供的项目生成工具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.jsexports.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/1010000009070061exports.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 CommonsChunkPluginchunksSortMode: '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上的项目地址,供大家参考：

这个脚手架在原有的基础上，加入了更多地服务：

mock服务，能控制到模块级别

使用axios封装了ajax的基础get，post方法可供调用

加入了vuex，并进行模块拆分

具体的可以看项目的代码，如果不符合需要，可以修改，也希望大家能够指出不足的地方。这里只是给大家提供了一种方案和思路，适合自己的才是最好的。

引言

准备

重构过程

步骤一 改变目录结构

步骤二 修改build下的配置文件

后记

Demo

步骤一改变目录结构

步骤二修改build下的配置文件