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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue仿ios列表左划删除
Sep 26 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 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
php之CodeIgniter学习笔记
2013/06/17 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
Javascript的闭包详解
2014/12/26 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
在Django中创建动态视图的教程
2015/07/15 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
"序列点" 是什么
2016/07/29 面试题
Java基础面试题
2014/07/19 面试题
广告传媒专业应届生求职信
2014/03/01 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
个人总结与自我评价
2014/09/18 职场文书
授权委托书样本
2014/09/25 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
教师党员个人整改措施
2014/10/27 职场文书
兵马俑的导游词
2015/02/02 职场文书
MBA推荐信怎么写
2015/03/25 职场文书