vue-cli配置多页面应用

vue脚手架创建的应用默认都是单页面的SPA，若需要开发多页面应用，需要自己手动配置。其实本质上就是将默认生成的这些文件(index.html、main.js、App.vue)当作一个页面，复制一份改改名字和基本内容作为另一个页面。

vue-cli2 配置多页面应用

方法1、手动配置每个页面

1、方便管理 在src新建pages目录 然后pages下建各个页面对应的文件夹 如：

image.png

2、在几个相关的配置文件中更改一下
build/webpack.base.conf.js:
更改入口文件配置

image.png

build/webpack.dev.conf.jd:
更改HtmlWebpackPlugin插件的配置，并新增该插件的实例

image.png

build/webpack.prod.conf.jd:
新增HtmlWebpackPlugin的实例配置，并添加chunks配置，注意chunks顺序必须按照此写法 公共文件在当前页面文件前面 会根据此在html中引入的

image.png

image.png

config/index.js：
在build选项中配置对应的页面,此处的配置名字需要和打包时候的文件webpack.prod.conf.js中HtmlWebpackPlugin实例的filename对应起来

image.png

此时终端输入指令 npm run dev 浏览器中打开即能访问home.html和 profile.html 页面。

方法2、使用封装方法动态配置多页面

方法二其实就是将方法1的手动方式封装成了2个函数方法，自动去获取对应文件夹下的多页面入口

1、首先将封装的方法放在 build/utils.js 文件中

// glob是webpack安装时依赖的第三方模块，
// 该模块允许使用 *等符号, 例如lib/*.js就是获取lib文件夹下所有js后缀名的文件
var glob = require("glob");
// 页面模板
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, "../src/pages");
// 用于做相应的merge处理
var merge = require("webpack-merge");
// 多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function() {
  var entryFiles = glob.sync(PAGE_PATH + "/*/*.js");
  var map = {};
  entryFiles.forEach(filePath => {
    var filename = filePath.substring(
      filePath.lastIndexOf("/") + 1,
      filePath.lastIndexOf(".")
    );
    map[filename] = filePath;
  });
  return map;
};

//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function() {
  let entryHtml = glob.sync(PAGE_PATH + "/*/*.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],
      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;
};

2、在webpack.base.conf.js中通过方法获取入口文件

module.exports = {
  context: path.resolve(__dirname, "../"),
  // entry: {
  //   home: "./src/views/home/home.js",
  //   cart: "./src/views/cart/cart.js"
  // },
  entry: utils.entries(),
  output: {

3、修改开发和打包环境的配置文件，在plugins数组后使用concat拼接HtmlWebpackPlugin插件的配置

image.png

vue-cli3 配置多页面应用

脚手架3配置多页面 和脚手架2差不多文件夹分类同脚手架2，只是脚手架3以上将配置文件隐藏起来了，步骤稍微不同
项目根目录新建vue.config.js文件，将配置放置于此文件中

let glob = require('glob');
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
    let entries = {}, tmp, htmls = {};
    // 读取src/pages/**/底下所有的html文件
    glob.sync(globPath+'html').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        htmls[tmp[1]] = entry
    })
    // 读取src/pages/**/底下所有的js文件
    glob.sync(globPath+'js').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        entries[tmp[1]] = {
            entry,
            //  当前目录没有有html则以共用的public/index.html作为模板
            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', 
            //  以文件夹名称.html作为访问地址
            filename:tmp[1] + '.html'   
        };
    });
    return entries;
};
let htmls = getEntry('./src/views/**/*.');
module.exports = {
    pages:htmls,
    publicPath: './',           //  解决打包之后静态文件路径404的问题
    outputDir: 'output',        //  打包后的文件夹名称，默认dist
    devServer: {
        open: true,             //  npm run serve 自动打开浏览器
        index: '/index.html'    //  默认启动页面
    },
    productionSourceMap: false
};

也是通过封装的函数方法自动获取对应文件夹下的文件 作为入口文件