vite1.0,vite2.0原理
主要介绍了vite2.0踩坑，记录了配置项目中遇到的一些问题，有一定的参考价值。感兴趣的朋友可以参考一下。
目录
vite项目建设优化，剩下的是对上一个的补充，记录一些配置项目中遇到的问题，希望对大家有帮助~
vite项目构建优化
动态路由导入由rollup构建，动态导入的文件会生成异步的chunk文件，在我们访问项目时按需加载，大大提高了应用的加载速度。
从“@/views/home/index.vue”导入个人主页
从“@/components/Layout.vue”导入布局
const routes:ArrayRouteRecordRaw=[
{
路径：“/”，
组件：布局，
重定向：“/home”，
儿童：[
{
路径：“/home”，
姓名：家，
成分：家，
Meta: {title:主页 }
},
{
路径：“/about”，
名称：“关于”，
Meta: {title:关于，keepAlive: true}，
component:()=import( @/views/about/index . vue )
},
{
路径：/square ，
名称：正方形，
Meta: {title:组件正方形，keepAlive: true}，
component:()=import( @/views/square/index . vue )
}
]
}
]
const router=createRouter({
history:process . ENV . node _ ENV=== development
？create web history(process . env . base _ URL)
:createWebHashHistory(process . env . base _ URL)，
路线，
scrollBehavior(to，from，savedPosition) {
if (savedPosition) {
//只有经过后台的时候才会触发。
返回保存的位置
}否则{
return { top: 0，behavior: smooth }
}
}
})
router.beforeEach((收件人，发件人，下一个)={
//可以查看权限。
if (to.path！==from.path) {
Document.title=`星乐圈 $ { to . meta . title } } ` 1
}
下一个()
})
router.onError((错误)={
const pattern=/加载块(\d)失败/g
const isChunkLoadFailed=error . message . match(pattern)
if (isChunkLoadFailed) {
location.reload()
}
})
导出默认路由器
上面的代码是vite搭建的vue项目的一个路由器文件，用的是VUE-router @ 4.0.6。VUE路由器支持开箱即用的动态导入，这意味着您可以使用动态导入而不是静态导入。正如您在代码中看到的，about page和square page都是动态导入的。
关于动态导入，MDN有非常详细的介绍：portal。
rollup构建完成后，动态导入的文件会生成异步的chunk文件，在我们访问项目时按需加载，大大提高了应用的加载速度。
vite项目中动态导入路线我踩过的坑：
构建时不支持@/alias。在构建的时候，rollup根据配置的别名找不到对应的文件，所以构建过程中会出现错误。
解决方案：
一开始觉得是引用路径的问题，于是尝试了几种引用方式，最后有一种成功了！component:()=import(/src/views/about/index . vue )改为绝对路径后，可以正常启动。
升级vite版本，从vite@2.0.0-beta.35开始，不支持别名。升级到vite@2.3.8后支持。估计2.0刚出来，一下子不完善也可以理解~
使用import.meta.glob方法。
我配置了一些我遇到的错误和警告。
警告：“import.meta”在配置的目标环境( es2019 )中不可用，将为空
当vite配置项esbuild.target为“es2019”时，将出现此警告。意味着在这种情况下不支持import.meta api。
[vite]内部服务器错误：无效的全局导入语法：模式必须以“.”开头或“/”(相对于项目根)
import.meta.glob()中的参数必须以“.”开头或“/”，并与根目录匹配。
代码的最后编写部分：
从“@/components/Layout.vue”导入布局
const modules=import . meta . glob(/src/views/*/index . vue )
const routes:ArrayRouteRecordRaw=[
{
路径：“/”，
组件：布局，
重定向：“/home”，
儿童：[
{
路径：“/home”，
姓名：家，
组件：模块[/src/views/home/index.vue]，
Meta: {title:主页 }
},
{
路径：“/about”，
名称：“关于”，
Meta: {title:关于，keepAlive: true}，
组件：模块[/src/views/about/index.vue]
},
{
路径：/square ，
名称：正方形，
Meta: {title:组件正方形，keepAlive: true}，
组件：模块[/src/views/square/index . vue ]
}
]
}
]
通过使用import.meta.glob方法，我们可以通过后台接口配置路由，并可控地控制权限。如果路由数据由接口返回，权限范围外的组件根本不会生成路由项，这无疑增加了权限控制的力度。
配置build.rollupoptions.manual块，通过分包来加载node_modules文件。
手动块(id) {
if(id . includes( node _ modules )id . includes( prime ){
返回“质数”
} else if(id . includes( node _ modules )id . includes( vue ){
返回“vue”
} else if(id . includes( node _ modules ){
返回“供应商”
}
}
如果未配置此项，vite会将node_modules包打包成一个大的异步vendor.js文件。如果文件太大，这无疑会增加页面渲染的阻塞时间。而且也不利于页面缓存优化。
在上面的配置中，我把ui框架(primevue)和vue相关的包打包到一个文件中，这样不仅可以减少每个依赖文件的体积，还可以优化项目的缓存。像这些基本库这样的依赖包更新的频率会降低。
结合服务器的文件缓存策略配置，用户可以直接从缓存中读取这些依赖文件，除了第一次访问时，以及以后访问时。通过在一定程度上削减依赖文件代码，可以大大提高项目的性能。
而且，当构建vite时，它会自动生成以下html文件
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
link rel= icon href=/favicon . ico rel= external no follow /
meta name= viewport content= width=device-width，initial-scale=1.0 /
标题我的项目/标题
脚本类型= module cross origin src=/assets/index . e 3627129 . js /script
link rel= module preload href=/js/vue/vue . a1ee 204 f . js rel= external no follow
link rel= module preload href=/js/prime/prime . EB 4 bfea 6 . js rel= external no follow
link rel= style sheet href=/assets/prime . 296674 D4 . CSS rel= external no follow
link rel= style sheet href=/assets/index . 289426 B3 . CSS rel= external no follow
/头
身体
div id=app/div
/body
/html
增加了rel=modulepreload 属性的link标签，可以预加载原生模块，保证一些文件不需要等待执行就可以加载，也提高了页面的性能。
图像资源文件处理。容量小于assetsInlineLimit选项值的资源将被内联为base64数据URL，该URL将被打包到引用它的文件中。这可以减少对文件的请求数量，并提高项目绩效。
其它
为动态导入的文件生成的异步块可以放在相应的文件夹中，或者块可以由自定义命名。
呵呵，我查了很久的rollup文档，自己试了很久，终于成功了。请参考以下配置：
导出默认定义配置({
构建：{
资产目录：资产，
汇总选项：{
输出：{
//eslint-disable-next-line @ typescript-eslint/no-explicit-any
chunk filenames:(chunk info:any)={
const facadeModuleId=chunk info . facadeModuleId？chunk info . facademoduleid . split(/):[]
const fileName=facadeModuleId[facadeModuleId . length-2] [name]
返回` js/${fileName}/[name]。[hash].js `文件
},
}
}
}
})
Vite配置传入全局变量的scss变量。
配置如下所示
导出默认定义配置({
css: {
预处理程序选项：{
scss: {
additional data:“@ import”。/src/styles/variables ；
}
}
},
})
还需要注意的是，不同版本的vite在配置项上会有一些差异，所以在配置一个项目的时候，如果完全按照文档配置还是有问题的话，不妨看看自己的版本和文档版本是否不同。
最后
分享一下我配置的vite2.0 Vue3.0项目：portal，用来试水的。如有不妥，请指正！
关于vite2.0踩坑记录的这篇文章到此为止。更多关于vite2.0踩坑的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。