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.html 和 http://localhost:8080/index2.html
OK，多页面配置完成
总结
以上所述是小编给大家介绍的vue.js多页面开发环境搭建过程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了详解如何去除vue项目中的#——History模式 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了vue或css动画实现列表向上无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
今天小编就为大家分享一篇vuejs选中当前样式active的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
基于Vue中this.$options.data()的this指向问题
这篇文章主要介绍了基于Vue中this.$options.data()的this指向问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
Vue 是一个非常流行和强大的前端框架，它让我们可以用简洁和优雅的方式来构建用户界面，今天我们来分享一个 Vue 中非常经典的问题，也是一个非常实用的技巧，希望对大家有所帮助2023-07-07
这篇文章主要介绍了Vue中关于重新渲染组件的方法及总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了使用vue init webpack项目名创建项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章小编要与大家分享的是建立和维护大型 Vue.js 项目的 10 个最佳实践，需要的小伙伴请和小编一起学习下面文章的具体内容吧2021-09-09
本文主要介绍了Vue中如何实现动态路由的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要给大家介绍了关于vue+echarts图表的基本使用步骤,Echarts是一款基于JavaScript的开源可视化图表库,而Vue是一种流行的JavaScript框架,用于构建用户界,需要的朋友可以参考下2023-11-11
最新评论