介绍
这篇文章将为大家详细讲解有关怎样搭建vue。js多页面开发环境,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
利用vue-cli搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页,面显示有点重复,特别是node_modules会有多份相同的。如果全部放到单页面项目下,又显得有点乱,这时候通过改造vue-cli搭建的项目为多页面,就是一个比较好的解决方法。
如何改造单页面vue。js项目为多页面项目?下面是这次改造的具体过程。
<强>,一,创建单页面vue。js项目
这里直接使用官方提供的脚手架vue-cli3创建,具体的过程请参考“vue-cli3.0升级记录”
<强>二、多页面配置
<强> 1,添加配置文件
在项目根路径下(与包。json同目录)添加vue.config。js,内容如下:
module.exports =, {
页面才能:{
,,,指数:{
,,,//,入口js的路径
,,,条目:,& # 39;。/src/主要# 39;
,//页面模板路径
,,,模板:,& # 39;。/src/公共/index . html # 39;
,,}
,,}
以前,} 上面的配置其实就是vue-cli建立项目的默认配置,如果增加页面,在页面节点下添加配置即可。但这种方式,每次增加一个新页面,就需要手动添加节点,这种重复的事情显然不智能。下面继续改造。
<强>,2,调整项目结构
要自动化,那么就需要按定一种规则把页面组织下。如把所有路由页面都放到src/页目录下,改造后的结构如下:
<强> 3,编写自动配置文件
在项目根路径下(与包。json同目录)添加vue.util。js,内容如下:
, const path =,需要(& # 39;path & # 39;)
,const glob =,要求(& # 39;一团# 39;)
,const START_PATH =, & # 39;/src/页面/& # 39;
,const PAGE_PATH =, path.resolve (__dirname, & # 39;强生# 39;,+,START_PATH),=,,exports.pages function (), {
var 才能;entryFiles =, glob.sync(时间+ PAGE_PATH & # 39;/* */* . html,)
var 才能;obj =, {}
entryFiles.forEach才能((filePath),=祝辞,{
,,var dirPath =, filePath.substring (0,, filePath.lastIndexOf (& # 39;/& # 39;))
,,var dirName =, dirPath.substring (dirPath.lastIndexOf (& # 39;/& # 39;), +, - 1)
,,var filename =, filePath.substring (filePath.lastIndexOf (START_PATH), +, START_PATH.length,, filePath.lastIndexOf (& # 39;/& # 39;))
,,if (filename.endsWith(目录名),{
,,,obj(文件名),=,{
,,,,条目:,filePath.substring (0,, filePath.lastIndexOf (& # 39; . html # 39;)), +, & # 39; . js # 39;
,,,,模板:,filePath.substring (0,, filePath.lastIndexOf (& # 39; . html # 39;)), +, & # 39; . html # 39;
,,,}
,,}
})才能
,return obj
以前,} 在vue.config。js使用上面的配置
, const utils =,需要(& # 39;。/vue.util& # 39;)
,module.exports =, {
,页面:utils.pages ()
以前,} <强>,三、测试下
<代码>纱dev
浏览器输入:
http://localhost: 8080/索引。html和http://localhost: 8080/index2。html
好的,多页面配置完成
关于“怎样搭建vue.js多页面开发环境”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
