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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
JS中的模糊查询功能
Dec 08 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
学生发电厂实习自我鉴定
2013/09/22 职场文书
毕业自我鉴定
2013/11/05 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
西湖英语导游词
2015/02/06 职场文书
文案策划岗位职责
2015/02/11 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL