vue.js多页面开发环境搭建过程


Posted in Javascript onApril 24, 2019

利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的。如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法。

如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程。

 一、创建单页面 vue.js 项目

这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请参考「vue-cli3.0 升级记录」

二、多页面配置

1、添加配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.config.js,内容如下:

module.exports = {
  pages: {
   index: {
    // 入口js的路径
    entry: './src/main',
 // 页面模板路径
    template: './src/public/index.html'
   }
  }
 }

上面的配置其实就是 vue-cli 建立项目的默认配置,如果增加页面,在 pages 节点下添加配置即可。但这种方式,每次增加一个新页面,就需要手动添加节点,这种重复的事情显然不智能。下面继续改造。

 2、调整项目结构

要自动化,那么就需要按定一种规则把页面组织下。如把所有路由页面都放到 src/pages 目录下,改造后的结构如下:

vue.js多页面开发环境搭建过程

3、编写自动配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.util.js,内容如下:

const path = require('path')
 const glob = require('glob')
 const START_PATH = '/src/pages/'
 const PAGE_PATH = path.resolve(__dirname, '.' + START_PATH) 
 exports.pages = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/**/*.html')
  var obj = {}
  entryFiles.forEach((filePath) => {
   var dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
   var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
   var filename = filePath.substring(filePath.lastIndexOf(START_PATH) + START_PATH.length, filePath.lastIndexOf('/'))
   if (filename.endsWith(dirName)) {
    obj[filename] = {
     entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
     template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
    }
   }
  })
  return obj
 }

在 vue.config.js 使用上面的配置

const utils = require('./vue.util')
 module.exports = {
 pages: utils.pages()
 }

 三、测试下

yarn dev

浏览器输入:

http://localhost:8080/index.html 和 http://localhost:8080/index2.html

OK,多页面配置完成

总结

以上所述是小编给大家介绍的vue.js多页面开发环境搭建过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
js arguments对象应用介绍
Nov 28 Javascript
js 获取、清空input type="file"的值(示例代码)
Dec 24 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
小程序实现订单倒计时功能
Apr 23 #Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 #Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 #Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 #Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 #Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 #Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
js 函数的副作用分析
2011/08/23 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python文件的md5加密方法
2016/04/06 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python操作redis方法总结
2018/06/06 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
教师四风自我剖析材料
2014/09/30 职场文书
大学副班长竞选稿
2015/11/21 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
介绍一下28个JS常用数组方法
2022/05/06 Javascript