Vite是一个现代的前端构建工具，其主要目的就是提高开发体验和构建速度由Evan You创建，特别是优化了与 Vue、React 等现代 JavaScript 框架的兼容性。

Vite使用了原生ES模块，在开发模式下，通过按需加载模块来实现快速的热重载。通过Rollup对于生产环境进行构建，优化了静态资产。底层支持了TypeScript、JSX、CSS 和 CSS Modules 等现代Web开发特性并且可以轻松集成其他工具和插件。通过灵活的配置方式，以满足各种项目需求。

在Vue 3中使用Vite

安装Vite

首先，确保Node.js使用 v12.0 以上版本，然后，可以通过以下命令创建一个新的Vue 3项目。

npm create vite@latest my-vue-app --template vue

在上面的代码中，my-vue-app是项目的名称。--template vue选项用于指定使用Vue 3模板。

进入项目目录并安装依赖

cd my-vue-appnpm install

运行开发服务器，通过以下命令启动开发服务器。

npm run dev

项目结构

Vite 创建的 Vue 3 项目结构通常包括以下文件和文件夹

src/：包含源代码，默认有 main.js 和 App.vue。public/：放置静态文件。index.html：应用的入口 HTML 文件。vite.config.js：Vite 的配置文件，可以在这里添加自定义配置。

在开发完成后，可以通过以下命令构建生产版本

npm run build

构建完成后，生成的文件会放在 dist/ 目录中。

额外配置

插件

Vite中支持了多种插件支持，类似于支持了像是Vue Router、Vuex等插件。这个我们可以在vite.config.js配置文件中进行添加和配置相关插件。

环境变量

当然，我们也可以在项目根目录中创建 .env文件来配置环境变量。

静态资源

在public文件夹中放置静态资源可以直接在应用中访问。

下面是一个完整的vite.config.js示例，涵盖了上述的多个配置项

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';export default defineConfig({  root: 'src',  base: '/my-app/',  mode: 'development',  plugins: [vue()],  build: {    outDir: '../dist',    assetsDir: 'static',    minify: 'esbuild',  },  server: {    port: 8080,    open: true,    proxy: {      '/api': {        target: ';,        changeOrigin: true,      }    }  },  css: {    modules: {      scopeBehaviour: 'local',    },  },  resolve: {    alias: {      '@': '/src',    },  },  define: {    'process.env': process.env,  },});

通过配置 vite.config.js 文件，我们就可以灵活地控制Vite的行为，来满足不同的开发和构建需求。无论是基础设置、插件扩展还是自定义服务器行为，Vite的速度和灵活性可以大大提升开发效率。