欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-01 13:32:40
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_mo...

利用 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

浏览器输入:

ok,多页面配置完成

总结

以上所述是小编给大家介绍的vue.js多页面开发环境搭建过程,希望对大家有所帮助