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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
jquery中radio checked问题
Mar 16 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
Node.js返回JSONP详解
May 18 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
微信小程序引用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代码审核的详细介绍
2013/06/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
简单实现python收发邮件功能
2018/01/05 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python批量处理文件或文件夹
2020/07/28 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
《唯一的听众》教学反思
2014/02/20 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Redis基本数据类型List常用操作命令
2022/06/01 Redis