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对象和DOM对象相互转化
Apr 24 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
小程序实现侧滑删除功能
Jun 25 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
php&java(一)
2006/10/09 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
python微信公众号之关键词自动回复
2018/06/15 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python如何读取bin文件并下发串口
2019/07/05 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python里反向传播算法详解
2020/11/22 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
采购主管工作职责
2013/12/12 职场文书
反对邪教标语
2014/06/30 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
实习生工作证明范本
2014/09/14 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
交通肇事罪辩护词
2015/05/21 职场文书