构建vue.js多页开发环境的过程

vue-cli构建的大多数项目都是单页应用程序项目。对于简单的项目，单个页面就能满足要求。但是，对于具有多个子项目的应用程序，如果创建了多个单页，显示会有点重复，尤其是同一node_modules会有多个副本。如果全部放在一个单页项目下，似乎有点乱。此时，将vue-cli构建的项目转化为多页是更好的解决方案。

如何将单页vue.js项目转化为多页项目？以下是这一转变的具体过程。

首先，创建一个单页vue.js项目

这里直接使用政府提供的脚手架vue-cli3。具体流程请参考“vue-cli3.0升级记录”

二、多页配置

1.添加配置文件

在项目的根路径下添加vue.config.js(与package.json相同的目录)，内容如下：

模块。导出={ pages : { Index : }//Entry js Path Entry : '。/src/main '，//页面模板路径模板3360 '。/src/public/index.html'}}以上配置实际上是vue-cli建立项目的默认配置。如果添加页面，但是这样，每次添加新的页面，都需要手动添加节点，这显然是不智能的。下面继续改造。

2.调整项目结构

要实现自动化，您需要根据特定的规则组织页面。如果所有路由页都放在src/pages目录中，则重构的结构如下：

3.编写自动配置文件

在项目的根路径下添加vue.util.js(与package.json相同的目录)，内容如下：

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 . last indexof('/'))var dirName=dirPath . substring(dirPath . last indexof('/')1)var filename=filePath . substring(filePath . last indexof(START _ PATH)START _ PATH . length，filePath . last indexof('/'))if(filename . endswith(dirName)){ obj[filename]={ entry : filePath . substring。html ')'。js '，template : Filepath . substring(0，filepath.lastindexof('。html ')'。html'}}}) Return obj}在vue.config.js中使用上述配置

Constutils=require('。/vue . util’)模块。exports={ pages 3360 utils . pages()}第三，在测试中，

纱线开发

浏览器输入：

http://localhost 33608080/index . html和http://localhost 33608080/index 2 . html。

好了，多页配置完成

摘要

以上是边肖介绍的vue.js多页开发环境的搭建过程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！