vue 配置多页面应用的示例代码


Posted in Javascript onOctober 22, 2018

前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化)

vue 是单页面应用。但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用。

1. 新建 vue 项目

vue init webpack vue_multiple_test
cd vue_multiple_test
npm install

2. 安装 glob

npm i glob --save-dev

glob 模块用于查找符合要求的文件

3. 目标结构目录

.
├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── logo.png
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── generatePage.sh
├── index.html
├── package-lock.json
├── package.json
├── src
│  ├── assets
│  │  └── logo.png
│  └── pages
│    ├── page1
│    │  ├── App.vue
│    │  ├── index.html
│    │  └── index.js
│    └── page2
│      ├── App.vue
│      ├── index.html
│      └── index.js
└── static

其中,pages文件夹用于放置页面。 page1 和 page2用于分别放置不同页面,且默认均包含三个文档: App.vue, index.html, index.js, 这样在多人协作时,可以更为清晰地明确每个文件的含义。除此之外,此文件也可配置路由。

4. utils 增加下述代码:

const glob = require('glob')
const PAGE_PATH = path.resolve(__dirname, '../src/pages')
const HtmlWebpackPlugin = require('html-webpack-plugin')

其中:PAGE_PATH 为所有页面所在的文件夹路径,指向 pages文件夹。

exports.entries = function () {
  /*用于匹配 pages 下一级文件夹中的 index.js 文件 */
  var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    /* 下述两句代码用于取出 pages 下一级文件夹的名称 */
    var entryPath = path.dirname(filePath)
    var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
    /* 生成对应的键值对 */
    map[filename] = filePath
  })
  return map
}

该方法用于生成多页面的入口对象,例如本例,获得的入口对象如下:

{ 
  page1: '/Users/work/learn/vue/vue_multiple_test/src/pages/page1/index.js',
  page2: '/Users/work/learn/vue/vue_multiple_test/src/pages/page2/index.js',
 }

其中:key 为当前页面的文件夹名称,

```value``` 为当前页面的入口文件名称

exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/index.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    var entryPath = path.dirname(filePath)
    var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
    let conf = {
      template: filePath,
      filename: filename + `/index.html`,
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      let productionConfig = {
        minify: {
         removeComments: true,     // 移除注释
         collapseWhitespace: true,   // 删除空白符和换行符
         removeAttributeQuotes: true  // 移除属性引号 
        },
        chunksSortMode: 'dependency'  // 对引入的chunk模块进行排序
      }
      conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

4. webpack.base.conf.js修改入口如下:

```entry: utils.entries()```

5. webpack.dev.conf.js 删除下述代码

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

6. webpack.prod.conf.js 删除下述代码

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
})

7. 构建结果

【dev】开发环境下,执行 npm run dev 访问:

 http://localhost:8080/page1/index.html
 http://localhost:8080/page2/index.html

 即为访问不同的页面


【production】生产环境下,执行 npm run build, 生成的文件目录如下所示:

│  ├── dist
│  ├── page1
│  │  └── index.html
│  ├── page2
│  │  └── index.html
│  └── static
│    ├── css
│    │  ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css
│    │  ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css.map
│    │  ├── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css
│    │  └── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css.map
│    └── js
│      ├── manifest.0c1cd46d93b12dcd0191.js
│      ├── manifest.0c1cd46d93b12dcd0191.js.map
│      ├── page1.e2997955f3b0f2090b7a.js
│      ├── page1.e2997955f3b0f2090b7a.js.map
│      ├── page2.4d41f3b684a56847f057.js
│      ├── page2.4d41f3b684a56847f057.js.map
│      ├── vendor.bb335a033c3b9e5d296a.js
│      └── vendor.bb335a033c3b9e5d296a.js.map

8.【懒人福利】使用shell脚本自动构建基础页面

在项目文件下新建shell脚本generatePage.sh, 并在脚本中写入下述代码:

#!/bin/bash
# 打开 pages 文件夹,并创建文件
cd src/pages
for file in $(ls)
do
 if [ $file == $1 ];then
   echo $1' 文件已存在, 请使用其他名字'
   exit
 fi
done
mkdir $1
cd $1
# 生成 index.html
echo "" > index.html
echo '<!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>' > index.html

# 生成 App.vue
echo "" > App.vue
echo '<template>
 <div id="app">
 </div>
</template>

<script>
export default {
 name: "App"
}
</script>

<style>
#app {}
</style>' > App.vue

# 生成 index.js
echo "" > index.js
echo "import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
})" > index.js

之后在项目路径下输入下述命令:

bash generatePage.sh page4

即可在pages文件夹下生成一个名为page4的新页面。还可以通过自定义shell脚本的内容写入路由等,以实现定制需求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
js实现批量删除功能
Aug 27 Javascript
jQuery实现计算器功能
Oct 19 jQuery
微信小程序引用iconfont图标的方法
Oct 22 #Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
php微信开发之关注事件
2018/06/14 PHP
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python pandas模块基础学习详解
2019/07/03 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
超市中秋节促销方案
2014/03/21 职场文书
机电专业求职信
2014/06/14 职场文书
真诚的求职信
2014/07/04 职场文书
出生医学证明书
2014/09/15 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python