目录前言使用yarn新建vite项目1.打开命令行工具2.执行`yarncreatevite`3.指定项目名**banxia-blog-frontend**4.选择框架**Vue**,通过上下箭头选择，**使用空格确定**。5.选择**javascript**,空格确定6.项目创建完成7.使用vscode打开项目，并新建终端8.执行`yarn`,安装依赖9.执行`yarndev`,启动项目项目结构分析单页面应用index.htmlmain.js安装ElementPlus使用包管理器完整引入type="module"的作用🧨🧨🧨大家好，我是搞前端的半夏🧑，一个热爱写文的前端工程师💻.如果喜欢我的
大家好，我是前端西瓜哥。诶哟喂，SVG怎么没内嵌？最近啊，西瓜哥我用vite去给一个项目构建（vitebuild）一个应用。打包结果是一个html和一些加了哈希的资源。然后打包出来的文件一看，发现居然有好几个1Kb以下的SVG 文件。我搜了下源码，这些SVG是这样被使用的：不对呀，理论上小于4Kb的静态资源，是会转成base64编码字符串，嵌入到其他资源中。较小的资源体积小于assetsInlineLimit选项值则会被内联为base64dataURL。build.assetsInlineLimit默认值为4096(4kb)。我发现使用库模式（打包成 index.es.js，使用该模式需要设置
Vue3vitebuild之后不显示页面内容，只显示空白，也没有报错如何解决我的项目在build之后就插入到我的主网站的/tools/image路径下使用的，并非主网站，所以需要配置两个地方：1.修改vite.config.js添加base，意思是build之后的外部资源都从当前目录的相对路径获取。比如main.js不是/main.js而是./main.jsexportdefaultdefineConfig({base:'./',})2.需要修改router.js中的history选项我不知道是什么原理哈，反正是管用，之前在没有使用vite的时候也是在router中关闭这个选项的，所以差不多的
项目场景：vue3+ts+vite项目打包问题描述errorduringbuild:RollupError:"default"isnotexportedby"node_modules/vue/dist/vue.runtime.esm-bundler.js",importedby"node_modules/@kangc/v-md-editor/lib/codemirror-editor.js".aterror(file:///D:...原因分析：vite不支持commonjs语法，需要使用@rollup/plugin-commonjs插件，用于将CommonJS模块转换为ES6模块的Rollup
目录在使用vite工具开发Vue.js3.0项目时，由于配置问题，导致了项目运行报错，错误提示如下：解决步骤，如下：1、首先安装依赖插件2、接着配置vite项目配置文件：vite.config.js3、重新运行在使用vite工具开发Vue.js3.0项目时，由于配置问题，导致了项目运行报错，错误提示如下：16:17:27[vite]pagereloadmain.jsFailedtoparsesourceforimportanalysisbecausethecontentcontainsinvalidJSsyntax.Install@vitejs/plugin-vuetohandle.vuefi
在实际开发中，有时候需要项目以https形式进行页面访问/调试，下面介绍下非vue-cli创建的vue项目如何开启https环境vue:^3.2.47vite:^4.1.4根据官方文档：开发服务器选项|Vite官方中文文档ps：首次操作，不要被类型boolean误导了哈，直接设置true可能报错正确打开方式1、首先根据官方文档安装依赖@vitejs/plugin-basic-sslnpminstall-D@vitejs/plugin-basic-ssl#or#yarnadd-D@vitejs/plugin-basic-ssl#or#pnpmadd-D@vitejs/plugin-basic-s
背景结合ElectronForge、Vite和Vue3，你可以快速构建功能丰富的跨平台桌面应用程序，尽管你可能只懂web开发，你一样可以轻松的开发出各式各样的桌面应用。而且Vite的快速热更新能力和Vue3的高效性能，加速了开发周期，使得开发者能够更快地迭代和测试应用。很多vue3的UI可以使用，例如本文选用的arco-design，这就是站在巨人肩膀之上。废话不多说，进入正题。本文的所有代码，已经上传github,如果使用，可以直接拿去。而且作者会持续更新它。Electron+Forge+ViteElectronForge官方提供了一个脚手架，且自带Vite模版。npminitelectro
最近在捣鼓一下vite，因为自己一直在使用react，就选择vite、react来体验一下vite。使用最简单的方法创建一个应用：yarncreatevite，然后选择react框架。vite默认配置是使用了defineConfig工具函数：import{defineConfig}from'vite'exportdefaultdefineConfig({//...})不管是js还是ts，都可以直接使用defineConfig工具函数，如果需要基于dev、serve或者build命令来选择不同选项，那就选择导出一个函数，比如：exportdefaultdefineConfig(({command
优雅解决方案在最下面，小伙伴们儿可以直接前往😊背景在vue3+vite2项目中，我们有时候想要动态绑定资源，比如像下面的代码这样： import{ref}from'vue';//静态图片资源constimg_src=ref('./1.jpg');实际效果是这样：原因分析我们注意到，控制台的报错信息GEThttp://127.0.0.1:5173/1.jpg404(NotFound)GET：表示向服务器请求资源的方式。http://127.0.0.1:5173：表示主机为项目开启的服务器地址以及端口号http://127.0.0.1:5173/1.jpg：表示存放在服务器中的图片资源地址。404
前言最近开始了项目旧改，将以前开发的一些校园小程序由uniapp+vue2版本升级为，unipp+vite+ts+vue3的架构，顺便把代码质量提升一下。由于是单兵作战，我选择将以前的后端摒弃，选择了微信小程序云开发作为后端，这样可以将我的开发精力聚焦在小程序上。但这么做也有如下两个缺点：使用了微信小程序云开发后，uniapp只适用于编译成微信小程序，失去了跨端的能力。uniapp使用云开发并不方便，尤其是使用了typescript后需要做大量的额外配置。综合考虑之下我还是使用了微信小程序云开发，因为本身我做的就是微信小程序，只不过以uniapp为框架进行开发，而第二点的话我也找到了解决的方法
