Vite
文章平均质量分 51
Vite语法及项目实战
小五Five
热爱生活,不停止思考,不停下脚步。
展开
-
【Vite环境变量】import.meta.env 和 loadEnv使用和区别
我们在做项目时需要各种配置信息(如应用标题、API 地址等),这些配置信息可能在不同环境下有所不同(如开发环境和生产环境)。如果每次更改开发或者更改生产环境需要修改源代码中的相关配置,这会导致应用程序的可维护性变得极低!因此,我们可以将这些配置信息通过环境变量来进行管理。原创 2023-06-07 09:43:04 · 7766 阅读 · 0 评论 -
项目配置@别名路径,并让编辑器正确识别和提示。
项目里配置别名路径是写项目时的常见操作。好处在于:简化模块路径、提高重构效率、便于维护。原创 2023-05-30 17:43:00 · 245 阅读 · 0 评论 -
和满屏import说拜拜!unplugin-auto-import/vite自动引入vue相关api
unplugin-auto-import/vite 是一个按需自动导入Vue/Vue Router等官方Api的插件。使用此插件后,不需要手动编写类似import {xx} from 'vue'这样的代码了,而是直接使用相关api,提升开发效率。原创 2023-05-30 17:41:50 · 693 阅读 · 0 评论 -
vite-svg-loader,在项目里轻松使用svg,ts项目需特别注意!
vite-svg-loader插件可以让我们像使用vue组件那样使用svg图,使用起来超级方便。原创 2023-05-19 11:37:59 · 2839 阅读 · 0 评论 -
vite-plugin-mock,在Vite项目中模拟数据(超简单超方便)
我们做项目的时候,经常会遇到以下两种情况:1.开发时,后端还没有写好接口和数据,前端需要先开发着;2.测试时或开发时,想要换不同的数据来查看不同的效果,但不方便让后端同事或者测试同事配合一直改数据。这个时候,前端自己模拟数据就非常重要了。最常见的方法就是用mockjs,不过vite-plugin-mock插件会让模拟数据更加方便!原创 2023-05-09 09:44:07 · 2545 阅读 · 5 评论 -
【Vite】解决项目启动控制台报“Network: use --host to expose”,他人也可访问项目
这样别人也能通过network地址访问你的项目了!因为项目没有配置IP,所以只能从本地启动,不能从IP启动。在 vite.config.ts配置host。原创 2023-04-19 13:12:10 · 482 阅读 · 0 评论 -
Vue3+Vite神器:按需引入自定义组件unplugin-vue-components
unplugin-vue-components插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件)。这个插件好处在于,不需要自己去注册组件,不管是组件内的import还是main.ts里的注册!此外!由于是按需引入,不像第一个方法那样整个components都全局注册,打包后体积也会更小!原创 2023-04-18 17:12:57 · 3839 阅读 · 0 评论 -
项目打包后asset静态资源里图片变少了(Vite使用的坑)
在vite.config.ts文件里增加配置,该配置是决定文件小于多少(kb单位)会转化为base64编码。项目中使用的图片有十几张,但是打包出来后dist里面的asset图片变少了。通过查看测试环境的项目发现,图片被转化为base64格式了。原创 2023-03-30 14:05:34 · 1477 阅读 · 1 评论 -
在Vite中配置SCSS全局变量及可能的坑
在项目中我们经常会使用css变量来提高开发效率,其中使用scss变量方法如本文所示。原创 2023-03-17 14:06:11 · 3534 阅读 · 1 评论 -
在Vite和Vue3项目中使用和配置sass
怎么在vue3项目中使用sass作为css预处理器。原创 2023-03-17 11:43:39 · 427 阅读 · 0 评论