vue 多页面,vue 多页应用
本文主要介绍vue的单页转换和多页应用的详细讲解。通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
单页和多页的区别我就不细说了。我们的业务适合多页面，很多小应用整体嵌入iframe。
如果项目太大，会有非常不好的体验问题。如果拆分多个项目，会有额外的费用，比如服务器资源部署。
基于此改造的目标
独立的业务逻辑、单个页面、单个命令包和单个包。首先，我们准备一个具有以下目录结构的基本项目。
src目录是我们平时开发的目录，dist是打包的目录。整体结构如图所示。
1将当前项目转换成多页目录。
Pages是为我们开发的目录文件。转换过程是将原来src下的所有目录结构复制到home，索引的每一页都有单独的副本。为了将多页面的优势兑现出来，这里我们选择两个ui框架，以便最终比较装箱体积。
npm i元素-ui -S
npm i ant-design-vue -S
分别在首页和索引中介绍。
首页也差不多，然后我们改vue.config.js
模块.导出={
公共路径：“”。/,
productionSourceMap: false，
Pages: {//vue cli3自带多页配置。
索引：{
条目：` src/pages/index/main.js `，
模板：` public/index.html `，
文件名：` index.html
},
首页：{
条目：` src/pages/home/main.js `，
模板：` public/index.html `，
文件名：` home.html
}
},
devServer: {
端口：8080
},
lintOnSave: false
}
现在让我们打包，看看生成的目录结构。
文件大小Gzipped
dist \ js \ chunk-vendors . 239 e820f . js 2544.36 KiB 703.20 KiB
dist \ js \ index . 1716 ccad . js 11.33 KiB 4.13 KiB
dist \ js \ home . e 4410 a 07 . js 7.08 KiB 2.57 KiB
dist \ js \ about . ca 80 b 2 fc . js 0.76 KiB 0.29 KiB
dist \ CSS \ chunk-vendors . 68b 49 EDF . CSS 666.01 KiB 89.04 KiB
dist \ CSS \ index . 5 DFA 7415 . CSS 0.45 KiB 0.28 KiB
dist \ CSS \ home . d 995708 f . CSS 0.44 KiB 0.27 KiB
省略图像和其他类型的资产。
构建时间：2022-05-01T12:26:06.551Z -哈希：693bf5bdcf72896b -时间：16240毫秒
完成构建完成。dist目录已准备好进行部署。
信息查看https://cli.vuejs.org/guide/deployment.html的部署说明
可以看到包装好的混在一起。我们的下一步是将它们分开，可配置的命令被单独打包。这个想法是循环页面下的文件夹。我们在pages下的目录中找出所有带有main.js的文件夹名。当然，我们也可以手动编写。每次添加一个页面，我们都单独维护这个数组。
Const pages=[home ， index] //添加页面时手动维护此数组。
当然我们也有办法帮我们维护这个数组，可以在我们更新的时候省去一些麻烦。
//获取页面下的文件夹
const path=require(path )
const glob=require(glob )
//找到pages所在的文件夹hello-world\src\pages
const PATH _ ENTRY=PATH . resolve(_ _ dirname，./src/pages )
//匹配页面路径下的main.js文件
//[
//D:/测试项目/hello-world/src/pages/home/main . js ，
// D:/test project/hello-world/src/pages/index/main . js
//]
const ENTRY file paths=glob . sync(PATH _ ENTRY /* */main . js )
const buildEntries=[]
entry file paths . foreach((file path)={
//找到对应的文件名，索引home
const filename=filepath.match(/([^/])\/main \。js$/)[1]
buildEntries.push(文件名)
})
模块.导出={
构建条目
}
BuildEntries不仅仅是我们得到的数组。
现在我们先继续改造vue.config.js，我们改变package.json中命令参数的形式，根据我们传递的参数分别封装相应的页面。
脚本:{
serve: vue-cli-service serve ，
build : vue-CLI-服务版本，
build:index : vue-CLI-service build index-no-clean ，//注意，no-clean不能清理文件，否则可能会清理文件夹下打包的其他页面。如果您一次部署一个页面，这没有关系。
“build:home”:“vue-CLI-service build home-no-clean”，
build:prod : vue-CLI-服务版本，
_build :节点build/build.js ，
lint : vue-CLI-服务lint
}
怎样才能得到传入的索引或者home参数？结果就是可以从参数process.argv中得到，具体来说就是可以搜索process.argv作为数组，第一项是可执行文件的目录，第二项是当前执行的JavaScript文件的路径，剩下的都是传递的参数，就像我们传递的索引在process.argv[3]中一样。现在vue.config.js转换如下
//编译多页配置
常量模块={}
const is production=process . ENV . node _ ENV=== production
const { buildEntries }=require(。/config/get pages’)
//初始化页面参数
函数initPageParams(page) {
模块
12阅读下页的全文
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。