vue脚手架使用pages快速构建一个多页应用

87 阅读 0 评论 58 点赞

我是靠谱客的博主殷勤小白菜，最近开发中收集的这篇文章主要介绍vue脚手架使用pages快速构建一个多页应用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue中使用pages快捷搭建一个多页应用

在项目中经常遇到一些类似的页面，这就需要封装成组件达到复用效果，但然而对于项目复杂度过高或者页面模块之间差异或者页面用户角色以及所属环境不一样，就可以选择构建多页应用来实现

什么是多页应用

多页应用可以理解成多个单页面构成的应用，单页可以看成一个html文件为一个单页面，而多个html文件就组成了一个多页应用了，具体文件目录结构如下：

├──public                      # 根文件目录
│  ├── index.html              # 根文件 html
│  ├── favicon.ico             # ico图标
├──src                         # 前端资源目录
│  ├── assets                  # 静态资源目录
│  │   └── img                 # img文件目录
│  ├── components              # 公共组件目录
│  ├── pages                   # 页面目录
│  │   ├── pages1              # page1 目录
│  │   │   ├── index.html      # page1 html 模板
│  │   │   ├── index.js        # page1 入口文件
│  │   │   └── index.vue       # page1 vue 配置文件
│  │   └── pages2              # page2 目录
│  │       ├── index.html      # page2 html 模板
│  │       ├── index.js        # page2 入口文件
│  │       └── index.vue       # page2 vue 配置文件
│  ├── router                  # router 目录
│  │   ├── pages1.js           # page1 路由
│  │   └── pages2.js           # page2 路由
│  ├── service                 # axios请求目录
│  │   └── axios1.js           # page1请求
│  │   └── axios2.js           # page2请求
│  ├── store                   # 状态管理 store 目录
│  │   ├── pages1.js           # pages1状态管理
│  │   └── pages2.js           # pages2状态管理
│  └── utils                   # 公共方法目录
├── .env.development           # 开发环境配置文件
├── .env.production            # 生产环境配置文件
├── .env.uat                   # 测试环境配置文件
├── .gitignore                 # git 忽略文件
├── babel.config.js            # babel 配置文件
├── package.json               # 包管理文件
├── vue.config.js              # CLI 配置文件

以上目录结构我们可以看出其实 pages 下的一个目录就是一个单页包含的功能，这里我们包含了 2个目录就构成了多页应用

在单页应用中，我们的入口文件只有一个，CLI 默认配置的是 main.js，但是到了多页应用，我们的入口文件便包含了 index.js、index.html等，数量取决于 pages 文件夹下目录的个数，这时候为了项目的可拓展性，我们需要自动计算入口文件的数量并解析路径配置到 webpack 中pages的 entry 属性上，所以我们可以通过glob读取指定文件下指定的文件集合，方法如下：

/* vue.config.js */

let glob = require('glob')
let env = process.env.NODE_ENV

//配置pages多页面获取当前文件夹下的html和js
function getEntry(filePath) {
    let entries = {}, tmp, htmls = {};
    // 读取src/pages/**/底下所有的html文件
    glob.sync(filePath + 'index.html').forEach(function (entry) {
        tmp = entry.split('/').splice(-3);//pages/pages1/index.html
        htmls[tmp[1]] = entry
    })
    // 读取src/pages/**/底下所有的index.js文件
    glob.sync(filePath + 'index.js').forEach(function (entry) {
        tmp = entry.split('/').splice(-3);
        entries[tmp[1]] = {
            entry, page页面的入口'./src/pages/pages1/index.js'
            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index', //page的模板文件'./src/pages/pages1/index.html'如当前目录没有有html则以共用的public/index作为模板
            filename: tmp[1] + (env == 'development' ? '' : '.html')   //  以文件夹名称'pages1'作为访问地址
        };
    });
    return entries;
}
let htmls = getEntry('./src/pages/**/');

module.exports = {
    pages: htmls,
    publicPath: './',       //  解决打包之后静态文件路径404的问题
    outputDir: 'dist',      //  打包后的文件夹名称，默认dist
    devServer: {
        // open: true,      //  npm run serve 自动打开浏览器
        index: '/pages1',    //  默认启动页面        
        proxy:''
    }
}

通过npm run dev 启动页面,这里的默认启动页是pages1页面，如果需要查看pages2页面可以通过修改devServer中index默认启动页为pages2重新npm run dev，也可以通过修改http://localhost:8080/pages2#/查看pages2页面，以上代码可参考链接