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

 更新时间:2019年04月24日 08:28:06   作者:lifefriend_007  
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。这篇文章主要介绍了vue.js多页面开发环境搭建 ,需要的朋友可以参考下

利用 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 目录下,改造后的结构如下:

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.htmlhttp://localhost:8080/index2.html

OK,多页面配置完成

总结

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

相关文章

  • vue cli3.x打包后如何修改生成的静态资源的目录和路径

    vue cli3.x打包后如何修改生成的静态资源的目录和路径

    这篇文章主要介绍了vue cli3.x打包后如何修改生成的静态资源的目录和路径,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中forEach循环的使用讲解

    vue中forEach循环的使用讲解

    这篇文章主要介绍了vue中forEach循环的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue3使用深度选择器修改样式问题

    vue3使用深度选择器修改样式问题

    这篇文章主要介绍了vue3使用深度选择器修改样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中的计算属性和侦听属性

    vue中的计算属性和侦听属性

    这篇文章主要介绍了vue中的计算属性和侦听属性,帮助大家更好的理解和学习vue框架的使用,感兴趣的朋友可以了解下
    2020-11-11
  • Vue3中使用pnpm搭建monorepo开发环境

    Vue3中使用pnpm搭建monorepo开发环境

    这篇文章主要为大家介绍了Vue3中使用pnpm搭建monorepo开发环境示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue-element-admin开发教程(v4.0.0之前)

    vue-element-admin开发教程(v4.0.0之前)

    本文主要介绍了vue-element-admin开发教程(v4.0.0之前),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 浅聊一下Vue2中的functional组件

    浅聊一下Vue2中的functional组件

    最近听到有人提到了Vue2的functional组件,大致上是说这个东西没有生命周期,在渲染层面上,会减少很多的消耗,一番处理之后,首屏时间和内存都能减少不少,所以本文小编就来和大家聊聊Vue2中的functional组件<BR>
    2023-08-08
  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    本篇文章主要介绍了详解vue项目优化之按需加载组件-使用webpack require.ensure,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue学习-VueRouter路由基础

    Vue学习-VueRouter路由基础

    这篇文章主要介绍了Vue学习-VueRouter路由基础,路由本质上就是超链接,xiamian 文章围绕VueRouter路由的相关资料展开详细内容,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2021-12-12
  • vue3 ts编写echart是tooltip无法展示的解决

    vue3 ts编写echart是tooltip无法展示的解决

    这篇文章主要介绍了vue3 ts编写echart是tooltip无法展示的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论