草庐IT

Vite 4.3

全部标签

Vue3+Vite+Vant报错Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=xxxx'

在使用Vue3+Vite+Vant搭建移动端项目时报错UncaughtSyntaxError:Therequestedmodule'/node_modules/.vite/vue.js?v=xxxx'。Vue3+Vite+Vant原因在开发过程中Vue3的依赖版本有变更,直接使用的npminstall下载新的版本,会导致node_modules下存在旧版本的缓存,从而影响了本地项目的启动编译。解决方案删除项目的node_modules文件夹,如果根目录存在package-lock.json,最好也一并删除。修改package.json,如下:"dependencies":{"axios":"^

如何在Vite项目中处理静态资源

在前端工程化建设中,静态资源是必须处理的一个问题,前端的静态资源通常包括图片、JSON、Worker文件、WebAssembly文件等等。由于静态资源本身并不是一个标准意义上的模块,因此在处理静态资源和代码时是需要区别对待的。对于资源加载问题,Vite需要处理的就是如何将静态资源解析出来并加载为一个ES模块;另一方面,我们还需要考虑在生产环境下,静态资源的部署问题、体积问题、网络性能等问题。本文将结合Vite自身的能力及其生态,来解决Vite项目中静态资源处理的各个疑难点。一、图片加载图片是前端项目中最常用的静态资源之一,本身包括的图片格式也非常的多,比如png、jpeg、webp、avif、

Vite 4发布,用更快的SWC替换了Babel

作者|BrunoCouriol译者|张卫滨策划|丁晓昀Vite前端构建工具背后的团队最近发布了Vite4.0,此时距离Vite3.0发布已有5个月。新版本的动力来自于从Rollup2.0到3.0的突破性升级。Vite4.0还增加了对SWC的支持,这是一个基于Rust的打包器(bundler),声称比Babel有数量级的速度提升。现在,Vite4.0在构建时使用Rollup3.0。Rollup3.0是在几周前的ViteConf2022上发布的。ViteConf2022聚集了Vite生态系统的主要参与者。自Vite2.0以来,Vite是一个与框架无关的构建工具。因此,许多其他的开发者工具、库和框架

vite 项目运行时出错:‘vite‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

文章目录报错分析解决报错分析因为使用vite创建vue3.0项目的时候,vite不会自动帮助我们install相关的依赖,需要我们手动去安装,然后我去项目的node_modules目录里面查看,果然什么都没有所以说出现这个问题的原因是:缺少安装依赖这一步!vite不像node或cli,会自动帮助我们执行npmi(install)命令去下载相关依赖,需要我们手动下载解决安装依赖npminstall再次运行npmrundev

vite技术揭秘--模版创建

创建命令  pnpmcreatevitepackageName  源码  参数选项    在创建模版时,是允许传递参数的    如指定--template后,就不需要在弹出用户下拉选择了  创建    promps定义的数组会在命令行中依次执行,并收集结果    此时我们已经知道用户选择的模版类型,以及定义的文件名称等内容,此时根据目标目录进行新建或清空    接着做读写操作,即从模板中读取文件复制到目标文件中    这显然是一次递归行为    其中,模版是由vite内置的    最后,根据你使用的包类型输出提示信息node相关包  minimist:命令行参数解析  prompts:创建交互

尤雨溪:Vite的现状与未来展望

10月5日-6日,ViteConf2023在线举行,Vue和Vite的创建者尤雨溪发表了题为《TheStateofVite》的演讲,他分享了Vite的现状与未来展望,本文就来看一看Vite现在怎么样了,以及未来的路将怎么走!Vite版本发布情况首先,来快速回顾一下自上一次ViteConf以来,Vite的版本发布情况。每个版本都有很多更新,这里只关注最主要的功能。Vite4.0Vite4.0于2022年12月发布,是上一次ViteConf后的主要版本更新。这个版本最大的变化是升级了Rollup3。Vite和Rollup同步了主要版本的发布,因此也停止了对旧版Node.js的支持。相较于Vite3

docker打包vue vite前端项目

打包vuevite前端项目(如若提供一些帮助,请帮忙点个赞)1.打包时将测试删除2.修改配置3.打包项目npmrunbuild显示成功(黄的也不知道是啥)打包好的前端文件放入4.配置default.confupstreamwms-app{server你自己的ip加端口;server192.168.xx.xx:8080;}server{listen80;server_namelocalhost;location/{root/usr/share/nginx/html;indexindex.htmlindex.htm;try_files$uri$uri//index.html=404;}#locat

Vue3 + Vite3 + Element-Plus 管理系统

Vue3+Vite3+Element-Plus管理系统介绍📖vue-diverse-admin,基于Vue3、TypeScript、Vite3、Element-Plus开源的一套后台管理模板,项目均使用JS开发,但已经配置TS,可以JS、TS混用。目前功能还在持续更新中…您也可以删除其他直接使用Layout布局进行二次开发一、Git仓库地址(欢迎Star⭐)Gitee:https://gitee.com/lin_zi_quan/vue-diverse-adminGitHub:https://github.com/1164095457/vue-diverse-admin二、🔨🔨🔨项目功能🚀使用V

使用vite-plugin-qiankun插件, 将应用快速接入乾坤(vue3 vite)

qiankun官网vite-plugin-qiankun插件github地址:vite-plugin-qiankun主应用1、安装乾坤$yarnaddqiankun#或者npmiqiankun-S2、在主应用中注册微应用(main.ts)import{registerMicroApps,start}from'qiankun';registerMicroApps([{name:'reactapp',//appnameregisteredentry:'//localhost:7100',container:'#vue-app-container',activeRule:'/yourActiveRu

(vite/webpack 通用)vue 白屏 Uncaught Syntaxerror: Unexpected token ‘?‘

如果可以实现记得点赞分享,谢谢老铁~一、问题的描述突然收到业务方发来的反馈:浏览器一片空白,开控制台输出:UncaughtSyntaxerror:Unexpectedtoken?这个是语法错误。二、如果是用vite来构建:如果是用vite来构建的,根据vite官方文档描述,build.target默认支持Chrome>=87、Firefox>=78、Safari>=14、Edge>=88传送,所以需要我们手动兼容低版本vite代码版本较高,导致低版本浏览器无法运行,结果是他那边浏览器的版本很低(谷歌44)导致的。1.首先安装插件:npmi@vitejs/plugin-legacy-D2.然后配