一、前言vue3的快速更新，很多IT发展快的地区在22开始都已经提上日程，小编所在的青岛好像最近才有点风波。vue3的人才在青岛还是比较稀缺的哈，纯属小编自己的看法，可能小编是个井底之蛙！！vue2+webpack的时代要过去了，主要是启动时间太慢了。所以还是比较推荐使用Vite进行构建，vue3官方也是推荐的！！速度快，基本上是秒启动级别的！带的例子还是vue3最新的组合式语法糖setup。二、vite介绍和搭建1、介绍Vite官网：https://cn.vitejs.dev/Vite是一个轻量级的、速度极快的构建工具，对VueSFC提供第一优先级支持。作者是尤雨溪，同时也是Vue的作者！V
多环境配置的实现方式使用vite创建的项目，相比原来的webpack项目确实在性能上带来了非常大的提升，我自己练手的一个项目也是使用vite+typescript+vue3来构建的。在实际开发场景中，我们很多时候会用到多环境配置，一般项目至少会区分dev和prod环境，然后在不同的环境下给相同参数设置一个不一样的值。在vite中也提供了这种能力，在官方文档中给出了一个示例：.env#所有情况下都会加载.env.local#所有情况下都会加载，但会被git忽略.env.[mode]#只在指定模式下加载.env.[mode].local#只在指定模式下加载，但会被git忽略1.envDir按照官方
多环境配置的实现方式使用vite创建的项目，相比原来的webpack项目确实在性能上带来了非常大的提升，我自己练手的一个项目也是使用vite+typescript+vue3来构建的。在实际开发场景中，我们很多时候会用到多环境配置，一般项目至少会区分dev和prod环境，然后在不同的环境下给相同参数设置一个不一样的值。在vite中也提供了这种能力，在官方文档中给出了一个示例：.env#所有情况下都会加载.env.local#所有情况下都会加载，但会被git忽略.env.[mode]#只在指定模式下加载.env.[mode].local#只在指定模式下加载，但会被git忽略1.envDir按照官方
安装依赖npminprogress--save-devnpmi--save-dev@types/nprogresssrc目录下创建目录plugins（该目录存放插件相关配置），plugins目录下创建nprogress目录，nprogress目录下创建index.ts文件，内容如下//文件位置：src/utils/nprogress.ts//引入进度条importNProgressfrom'nprogress';import'nprogress/nprogress.css';//全局进度条的配置NProgress.configure({easing:'ease',//动画方式speed:100
安装依赖npminprogress--save-devnpmi--save-dev@types/nprogresssrc目录下创建目录plugins（该目录存放插件相关配置），plugins目录下创建nprogress目录，nprogress目录下创建index.ts文件，内容如下//文件位置：src/utils/nprogress.ts//引入进度条importNProgressfrom'nprogress';import'nprogress/nprogress.css';//全局进度条的配置NProgress.configure({easing:'ease',//动画方式speed:100
遇到问题在搭建完成正常开发的时候，也不知道在那个配置出了问题，每次一修改代码，保存vite都会重新reload，浏览器也会重新刷新，没有了热更新测试了好久发现问题出在unplugin-auto-import和unplugin-vue-components这两个插件第一个问题：直接使用默认的声明文件生产位置（和src同级），此时src下面的所有vue文件无法读取到声明文件，ts代码提示会有报错，但是不会出现pagereload和浏览器刷新问题image.png配置如下exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:['v
Vite爬坑日记：在使用Vite3+Svelte3构建Web应用时，控制台报错：processisnotdefined。Vite问题原因在Vite中process.env全局环境变量被移除了，相当于process.env=null，如果项目中有依赖process.env这个对象，并进行了get/set操作时就会出现报错。解决办法在vite.config.js配置文件中增加define:{"process.env":{}}import{defineConfig,loadEnv}from"vite";import{svelte}from"@sveltejs/vite-plugin-svelte";
遇到问题在搭建完成正常开发的时候，也不知道在那个配置出了问题，每次一修改代码，保存vite都会重新reload，浏览器也会重新刷新，没有了热更新测试了好久发现问题出在unplugin-auto-import和unplugin-vue-components这两个插件第一个问题：直接使用默认的声明文件生产位置（和src同级），此时src下面的所有vue文件无法读取到声明文件，ts代码提示会有报错，但是不会出现pagereload和浏览器刷新问题image.png配置如下exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:['v
Vite爬坑日记：在使用Vite3+Svelte3构建Web应用时，控制台报错：processisnotdefined。Vite问题原因在Vite中process.env全局环境变量被移除了，相当于process.env=null，如果项目中有依赖process.env这个对象，并进行了get/set操作时就会出现报错。解决办法在vite.config.js配置文件中增加define:{"process.env":{}}import{defineConfig,loadEnv}from"vite";import{svelte}from"@sveltejs/vite-plugin-svelte";
近年来，前端技术日新月异，Vite、Vue3、Svelte、SolidJS等框架工具大放异彩，身为一个前端开发，总感觉一刻不学习就要out了。最近使用Vite3+Svelte3来构建封装自定义的WebComponents，开始了艰难的爬坑之旅，本文记录一下：Vite3+Svelte3配置Sass预处理器，在Svelte单文件组件中使用@import导入scss样式文件。Vite+Svelte前言Svelte是一种全新的构建用户界面的方法。传统框架如React和Vue在浏览器中需要做大量的工作，而Svelte将这些工作放到构建应用程序的编译阶段来处理。配置安装svelte-preprocess和
