当前位置: 首页 > 网络应用技术

VUE单页转换多页面应用程序

时间:2023-03-06 14:30:14 网络应用技术

  单页和多页之间的差异在这里不会说。我们的业务适用于多页面,许多小应用程序嵌入在iframe的整体嵌入式中。

  SRC目录是我们通常开发的目录。

  1将当前项目转换为多页面目录

  在页面下为我们开发的目录文件是将原始SRC下的所有目录结构复制到家庭中。索引每个页面分开以提取多页面优势。

  类似于家庭和索引中的主页,然后我们更改vue.config.js

  现在我们打包并查看生成的目录结构

  您可以看到包装混合在一起。下一步是将它们分开并配置命令以分别包装该想法。循环页面下的文件夹我们在页面下的目录中找到所有带有main.js的文件文件夹。当然,我们也可以手动写入死亡。每次增加页面时,我们都会分别维护此数组

  当然,我们还可以帮助我们维护此数组,这可以在我们更新时节省更多麻烦

  构建我们的数组和我们的数组

  现在,我们继续转换vue.config.js。我们首先更改package.json中命令中的存在形式。根据我们通过的参数

  我们如何获取索引或家庭参数,我们可以获得process.argv参数的结果。可以将其搜索process.argv作为数组。JavaScript文件路径的当前执行是其余参数,就像我们在该过程上传递的索引一样。ARGV[3]现在在vue.config中转换。JS如下如下

  目前,我们NPM运行构建:索引尝试查看包装结果。您可以看到可以将所有与索引相对应的文件放在索引文件目录中。如果我们需要打包回家,则直接npm运行构建:家庭

  现在我们已经实施了它并单独打包,但是如果我们认为,我们命令打包所有页面。这次我们需要一种节点方式来帮助我们意识到我们正在单独构建JS文件代码。

  思想是循环包装命令的关键,是为我们执行包装命令的Execsync方法。现在我们执行它,npm运行_build

  在这一点上,我们的多页包装基本上已经完成,将来可以完成一些CDN处理,或者优化块的拆卸。

  我没有写太多文章,每个人都会阅读排版