Vue-cli创建项目从单页面到多页面的方法

对于某些项目来说，单页面不能很好的满足需求，所以需要将vue-cli创建的单页面项目改为多页面项目。

需要修改以下几个文件：

1、下载依赖glob

$npm install glob --save-dev

2、修改build下的文件

（1）修改webpack.base.conf.js

添加以下代码：

var glob = require('glob')；
var entries = getEntry('./src/pages/**/*.js')

将module.exports中的

entry: {
   app: './src/main.js'
  },

注释掉，然后添加这一行代码：

 entry: entries,

至于entries是什么，别急呀，看下面：

添加一个方法：

//获取入口js文件
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js得到index
  entries[pathname] = entry;
 });
 return entries;
}

这个文件修改成这样子就可以了。

（2）修改webpack.dev.conf.js

添加以下代码：

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

将module.exports中的plugins里的

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

注释掉，然后添加以下代码：

function getEntry(globPath) {
 var entries = {},basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}
var pages = getEntry('src/pages/**/*.html');
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  chunks:[pathname] };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

这个文件修改到此就可以了。

（3）webpack.prod.conf.js

这个文件修改的套路与上一个文件类似
 添加以下代码： var glob = require(‘glob’) 因为项目在创建时，生成项目的时候是直接将可选的所有依赖都选择了yes，所以项目中的env的声明定义如下：

var env = process.env.NODE_ENV === ‘testing ? require(‘../config/test.env’) : config.build.env ;