vue开发多页应用,vue开发网页案例
通常，我们的vue项目是单页的。实际上，由于vue在工程开发上依赖于webpack，Web Pack，webpack us整合了所有的资源，形成一个单一的页面。下面这篇文章主要介绍vue多页面项目开发的相关信息，有需要的朋友可以参考一下。
目录
单页应用与多页应用单页应用优缺点配置多页应用1。修改vue.config.js2修改title3。合并第三方库4。打包第三方scss5。其他常见设置摘要
单页应用和多页应用
单页应用
SPA(单页应用):单页应用，即一个web项目只有一个页面(即一个HTML文件)。
就是把整个项目所有页面的所有内容分成很多小块(也就是组件)，可以重用，可以随意调整。每个组件都是一个独立的部分(包括html、css和javascript代码)。再做一个html(基本没啥)。这个html是一个页面容器。需要放什么组件的时候，直接介绍就行了。跳的时候直接跳组件就好了。当需要加载一个组件时，js会在这些组件中动态创建HTML和CSS。
这类项目通常都需要router来进行页面跳转.
一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。
压缩页面分布目录结构
距离
静电
js
img
dll
.
index.html
.
.
多页应用
MPA(multipage application):多页面应用，即一个web项目有多个页面(即多个HTML文件)。
指有多个独立页面(多个html页面)的应用，每个页面都要重复加载js、css等相关资源。多页面应用跳转需要刷新整个页面资源。
项目是由多个完整的页面组成。多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载。
压缩页面分布目录结构
距离
页面(此处打包哪个文件夹并自行配置)
js
img
index.html
user.html
setting.html
.超文本标记语言
.超文本标记语言。。。
优缺点
单页应用程序的优点和缺点
优势
有良好的交互体验。可以改善页面切换体验，用户在访问应用页面时不会频繁切换浏览页面，避免页面重载。
页面一次性请求web应用的所有代码(HTML、JavaScript和CSS)，考虑到首屏加载慢，有时会按需加载。这样以后用户的每一个动作都不会重新加载页面(也就是不再需要向服务器索要页面缓慢的HTML、css、js代码)。而是会用JavaScript动态转换HTML内容(这个不需要和服务器交互，除非数据是动态的，那你只需要向服务器要数据就可以了)。
劣势
SEO很难。
第一次屏幕加载(初始加载)需要很长时间。为了实现单页面Web应用的功能和显示效果，页面加载时要统一加载JavaScript和CSS，需要时可以加载部分页面。所以JavaScript和CSS代码必须结合压缩；
多页应用程序的优点和缺点
优势
对seo有好处。
第一个屏幕加载很快。
劣势
页面切换慢。共享资源(html，css，js)不共享，每个页面都需要加载。
页面上有许多重复的代码。
配置多页应用
1. 修改vue.config.js
官网配置入口
以多页模式构建应用程序。每个“页面”都应该有一个对应的JavaScript入口文件。它的值应该是一个对象，对象的键是门户的名称，值是：
指定了条目、模板、文件名、标题和块的对象(除了条目之外都是可选的)；或者指定其条目的字符串。模块.导出={
页数：{
索引：{
//页面的入口
条目： src/index/main.js ，
//模板源
模板：“public/index.html”，
//dist/index . html中的输出
文件名：“index.html”，
//当使用标题选项时，
//模板中的标题标签需要是title %=htmlwebpackplugin。选项。标题%/标题
标题："索引页",
//在这个页面中包含的块，默认情况下会包含
//提取出来的通用矮胖的人或物和供应商区块。
块：[块供应商，块公共，索引]
},
//当使用只有入口的字符串格式时，
//模板会被推导为` public/subpage.html
//并且如果找不到的话，就回退到` public/index.html
//输出文件名会被推导为subpage.html
子页面： src/subpage/main.js
}
}
以上是官网的例子，这里我们改写一下，统一配置多页
前提条件在科学研究委员会下新建一个页文件夹
页新建如下三个文件
页
index-skeleton.html
indexApp.html
app.js
const glob=require(glob )
const fs=require( fs )；
let title obj={ }；
//统一配置多页
//这里是遍历科学研究委员会下面的页下面每个文件夹（例如索引)下以xxxApp.vue命名的某视频剪辑软件页面
glob.sync( ./src/pages/* */* app。vue’).forEach((路径)={
//遍历小路
console.log(路径，"路径")
//./src/pages/index/indexApp.vue路径
//找到文件名
常量文件名=路径。split(/)[路径。拆分(/).长度-1];
console.log(文件名，"文件名")
//indexApp.vue文件名
//去掉应用后缀
const chunk=path.substring(12，path。(/ fileName))的索引；
console.log(chunk，“chunk”)
//索引区块
//这里是给每个页面设置标题，需要在indexApp.vue设置一个变量页面标题
设文件内容=fs。readFileSync(路径，{编码： utf-8 })。toString()。替换(/\r\n/g， )；
文件内容=文件内容。substr(文件内容。的索引(页面标题：)；
文件内容=文件内容。substr(0，fileContent.indexOf(，)；
文件内容=
文件内容。(“”)0的索引
？文件内容。substr(文件内容。的索引(“”)1)
:文件内容。substr(文件内容。的索引(“”)1)；
文件内容=
文件内容。(“”)0的索引
？fileContent.substr(0，fileContent.indexOf( ))
:fileContent.substr(0，文件内容。(“”)的索引；
titleObj[chunk]=fileContent？文件内容： 标题；
});
//这里是遍历科学研究委员会下面的页下面每个文件夹（例如索引)下以app.js
glob.sync( ./src/pages/**/app.js ).forEach((路径)={
//打包射流研究…
const chunk=path.split( ./src/pages/)[1].拆分(/app。js )[0]；
const tmp=chunk。拆分(/)；
//模版html，如果都是一样的，可以直接使用公众的下index.html，如果要设置标题的话，需要每个页面都有一个超文本标记语言模版，如果不需要，就可以使用同一个，看个人习惯
let templateUrl=
src/pages/ chunk / tmp[tmp。长度-1]-骨架。html ；
页数[区块]={
条目：路径，//入口文件
模板：templateUrl，//模版超文本标记语言
title: titleObj[chunk]？titleObj[chunk]:标题,//标题
文件名：chunk.replace(/\//g，-) .html ，//打包出来的超文本标记语言名字
块：[块供应商，块公共，块]，//依赖包
};
});
模块。导出={
//选项.
公共路径：过程。环境。node _ ENV===生产
？/dist/
: /,
页数，
}
2. 修改title
其实是用插件替换的
很简单，就是把超文本标记语言模版中的标题使用模版语法就行
例如index-skeleton.html这里每个页面超文本标记语言都是一样的，复制即可
title %=htmlwebpackplugin。选项。标题%/标题
3. 合并第三方库
如果不设置分包，所有节点_模块里面的第三方资源库，例如Echarts，Axios，ali-oss，等等都会被打进大块供应商，至于为什么会打进去，我们看下vue。配置。射流研究…默认的分包规则
官网分包拆分块入口
官网默认的配置
模块。导出={
//.
//.
优化：{
拆分块
区块："异步",//代码分割时对异步代码生效，全部：所有代码有效，初始：同步代码有效
最小尺寸：30000,//代码分割最小的模块大小，引入的模块大于30000B才做代码分割
MaxSize: 0，//码分的最大模块大小。如果大于该值，则需要进行码分，一般使用默认值。
MinChunks: 1，//只有引入次数大于等于1时才进行代码分割。
MaxsyncRequests: 6，//异步请求的最大数量，即同时加载的模块的最大数量。
MaxInitialRequests: 4，//通过代码分割将入口文件最多分割成4个js文件。
AutomaticNameDelimiter: ~ ，//文件生成时的连接器
AutomaticNameMaxLength: 30，//自动生成的文件名的最大长度
缓存组：{
供应商：{
Test:/[\ \/] node_modules [\ \/]/，//位于node_modules中的模块做代码分割。
优先级：-10 //根据优先级，决定封装到哪个组中，比如node_modules中的一个模块进行编码。
}，//split，既满足vendors，又满足default，则按优先级打包到vendors组。
默认：{//无测试表示所有模块都可以进入默认组，但是注意它的优先级低。
优先级：-20，//根据优先级，决定装入哪个组，装入优先级最高的组。
seexistingchunk:true///如果某个模块已经打包，那么再次打包时会忽略之前的模块。
}
}
}
}
};
让我们来关注一下minChunks的配置。默认情况下，大于一倍就会被转包。以前是单页，所以分包没问题，只会在index.html引进。现在它是多页的，并且这一大块供应商将被介绍到每一页。有些包实际上只被两三个页面使用。所以最好不要转包，或者达到一定次数才转包才有意义。
分包前我们在这里设置了8次，几乎没有分包。可以根据自己的需求自行设置。
优化：{
最小化：假，
splitChunks
缓存组：{//缓存组
公共：{//公共模块
Name: chunk-common ，//名称应该与上面的chunks定义一致。
组块：“初始”，
MinSize: 1，//大小限制
优先级：0，
MinChunks: 8，//至少重用过几次。
},
//打包第三方库的文件
供应商：{
Name: chunk-vendors ，//该名称应该与上面的chunk定义一致。
测试：/[\ \/]节点模块[\\/]/，
组块：“初始”，
优先级：10，//权限更高，重要的是先撤！
minChunks: 8，
},
},
},
},
4. 打包第三方scss
有一些自己写的公共SCS，比如common.scss，我不想在页面上介绍，因为每一页都要介绍。其实也有一个很简单的处理方法。这个和之前变化不大，不想多说，直接上代码。
让scssVariables=require(。/src/scss/variables . scss . js )；
css: {
loaderOptions: {
scss: {
前置数据：
object . keys(SCS变量)。map((k)=`${k.replace(_ ，-)}:$ { SCS variables[k]}；`)。join(\n) \n ，
},
},
},
5. 其它常见设置
只是一些常见的设置。看个人设置。这里，我们推荐filenameHashing。多页应用程序的设置没有哈希。因为路由不用，所以不会用。
模块.导出={
公共路径：“”。/,
//输出目录
输出目录：“基金”，
资产目录： ，
//配置别名
chainWebpack: (config)={
config.resolve.alias.set(@ ，resolve( src )；
config.resolve.alias.set(@@ )，resolve( src/components )；
config . resolve . alias . set( @ assets ，resolve( src/assets ))；
config.resolve.alias.set(scss ，resolve( src/scss ))；
},
//关闭eslint验证
lintOnSave:假的，
//不生成地图文件
productionSourceMap: false，
//文件名没有哈希值
filenameHashing: false，
devServer: {
public path:“/fund/”，
代理：{//本地调试转发
/api: {
目标：“http://127.0.0.1:8080”，
changeOrigin:真的，
路径重写：{
^/api: ，
},
},
},
},
};
总结
关于vue多页面项目开发的这篇文章到此为止。更多相关vue多页项目开发内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。