1.基于npminitvite@latest搭建Vite工程2.配置文件工程和目录下的配置文件为vite.config.js文件。在命令行运行vite时，Vite会自动解析该文件，其基本配置如下：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//使用defineConfig工具函数来gettypehintswithoutjsdocannotationsexportdefaultdefineConfig({plugins:[vue()]})3.场景配置如果配置需要根据（dev/serveorbuild）命令或不同模式来确定选项，可以选择export以下函数：import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';//使用defineConfig工具函数获取类型提示，无需jsdoc注解exportdefaultdefineConfig(({command,mode})=>{console.log(command,mode);//开发环境的command值为serve，生产环境为buildif(command==='serve'){return{plugins:[vue()]};}else{return{插件:[vue()]};}});二、为什么要vite赶紧看下vite的官方文档，官方文档已经给出了很清楚的解释https://vitejs.cn/guide/why.html#the-problems，主要总结如下几点：改进vite服务器的启动速度。类似于webpack，一个packager风格的构建工具，它首先将所有资源打包成bundle，然后启动服务，vite对这个过程进行后处理，并做一些优化来提高服务器性能。启动速度主要有以下几点：(1)通过esbuild预构建依赖依赖是指在开发过程中不会发生变化的纯JavaScript，主要包括node_modules下的文件，通常包含各种模块化格式（CommonJS、UMD、ESM等），所以需要转成原生的ES模块。为了完成转换过程，引入了esbuild用于预构建依赖项。由于Esbuild是用go编写的，所以它的构建速度比用JavaScript编写的要快。打包器构建速度更快(2)现代浏览器支持ESM格式的代码。由于浏览器支持ESM格式的代码，因此浏览器可以接管打包器的部分工作。Vite只需要在浏览器请求源码时，将源码进行转换压入即可。需要源代码。基于ESM的开发服务器加快更新速度为了加快更新速度，Vite做了很多优化，主要有以下几点：（1）在减少esbuild预构建依赖的网络请求时，ESM将很多内部模块的依赖转化为一个模块，从而减少网络请求次数，提高页面加载性能(2)请求缓存源代码模块会按照304NotModified协商缓存，而依赖的请求modules会通过Cache-Control:max-age=31536000，Immutable进行强缓存，一旦被缓存，就不需要再次请求了。3.配置项Vite为方便用户提供了很多配置项，主要包括7大类：共享配置、开发服务选项、构建选项、预览选项、依赖项优化选项、SSR选项、Worker选项，个人认为第一个三种类型的选项是最重要的。接下来，让我们看一下前三个选项。3.1分享选项分享选项是指vite在开发环境和生产环境都会执行的配置项。它们主要用来表示一些常用的内容。下面我将列出一些我认为重要的展示。1.根项目根目录（即index.html文件）所在位置。例如当index.html文件和src文件夹在testRoot文件下时，配置如下：exportdefaultdefineConfig({root:'./testRoot',plugins:[vue()]});2.base用于设置公共文件路径，例如如下设置后，在开发环境中可以通过http://localhost:3000/testBase访问需要的页面：exportdefaultdefineConfig({base:'/testBase/',插件:[vue()]});3.mode用于表示这次是开发模式（development）还是生产模式（production），将serve和build模式全部覆盖，也可以通过--mode选项重写：exportdefaultdefineConfig({插件:[vue()],模式:'生产'});4.plugins设置需要使用的插件数组，plugins是解决purevite提供的开箱即用功能的能力。例如，@vitejs/plugin-vue提供了对Vue3单文件组件的支持：import{defineConfig}from"vite";从“@vitejs/plugin-vue”导入vue；exportdefaultdefineConfig({plugins:[vue()]});5.publicDir该配置设置了静态资源服务的文件，配置默认为公共文件，该目录下的文件在开发时在/提供，构建时复制到outDir的根目录下。下面是设置静态资源服务文件为./testPublicDir:exportdefaultdefineConfig({plugins:[vue()],publicDir:'./testPublicDir'});6.resolve.alias使用这个配置来设置文件系统路径的别名。设置路径是使用绝对路径，使用相对路径的别名值会原封不动的使用：exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve(__dirname,'./src')}}});7.envDir和envPrefix有时需要设置代码中使用环境变量。环境变量文件的目录可以通过envDir设置（默认为根目录），暴露给环境变量的前缀可以通过envPrefix设置（默认为VITE_）。设置好后可以通过import.meta.env读取代码中的变量该目录下可以读取的文件主要有以下几个：.env#在所有情况下都会加载env.local#在所有情况下都会加载，但会被git.env忽略。[mode]#只有在指定模式Download.env.[mode].local#只在指定模式下加载，但会被git忽略。文件中的内容可以设置如下：VITE_TEST=test//可读TEST=test//不可读3.2开发服务选项除了共享选项，我们在开发环境的时候还要注意开发服务选项.这个选项直接代表了我们如何配置viteserver。我觉得常用的选项如下：exportdefaultdefineConfig({plugins:[vue()],server:{//是否在浏览器中自动打开应用open:true,//指定服务器应该使用哪个IP地址listentohost:'127.0.0.1',//指定开发服务器端口号port:8080,//proxyproxy:{'/api':{target:'http://127.0.0.1:8888',changeOrigin:true,rewrite:path=>path.replace('^/api','')}}}});3.3构建选项系统开发完成后，必须打包构建，然后发布。vite的打包构建使用了rollup能力。打包构建的选项在构建选项中。我认为常用的选项如下：exportdefaultdefineConfig({plugins:[vue()],build:{//设置最终构建的浏览器兼容性目标（默认值为'modules'）target:'es2015',//指定输出路径，默认为distoutDir:'testOutDir',//指定生成静态资源的存放路径，默认assetsDir:'public',//指定小于size的内容会内联成base64，减少请求次数（默认4096，即is,4kb)assetsInlineLimit:4096,//构建后是否生成sourcemap文件，默认falsesourcemap:true,//自定义Rollup底层配置（一般不需要配置）rollupOptions:{//指定打包的入口文件输入：{默认值：'。/index.html'},//指定文件输出的配置output:{//从入口点创建的块的打包输出格式[name]表示文件名，[hash]表示哈希值filecontententryFileNames:'test/test-[name]-[hash].js',//用于命名代码拆分过程中创建的共享块的输出chunkFileNames:'js/test-[name]-[hash].js',//用于输出静态资源的命名，[ext]表示文件扩展名assetFileNames:'assets/test-[name]-[hash].[ext]'}},//是否产生mainfest.json文件，此文件包含未经过哈希处理的资源名称和哈希版本的映射清单：true}});4、单页面应用和多页面应用的配置默认情况下，单页面应用的配置由vite生成，但是多页面应用如何配置呢？这确实值得深思。以下面的目录结构为例，如何配置呢？vite-project├─.env├─.gitignore├─README.md├─index.html├─package-lock.json├─package.json├─public│└─favicon.ico├─src│├─page1││├─index.html││└─src││├─App.vue││├─assets│││└─logo.png││├─components│││└─HelloWorld.vue││└─main.js│└─page2│├─index.html│└─src│├─App.vue│├─assets││└─logo.png│├─components││└─HelloWorld.vue│└─main.js└─vite上面的页面结构应该怎么配置.config.js呢？我们看一下exportdefaultdefineConfig({plugins:[vue()],root:'./src',build:{rollupOptions:{input:{page1:path.resolve(__dirname,'./src/page1/index.html'),page2:path.resolve(__dirname,'./src/page2/index.html')}}}});
