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

时间:2021-05-26

利用 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.html 和 http://localhost:8080/index2.html

OK,多页面配置完成

总结

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章