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-app
npm 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: 'http://localhost:5000',
        changeOrigin: true,
      }
    }
  },
  css: {
    modules: {
      scopeBehaviour: 'local',
    },
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  define: {
    'process.env': process.env,
  },
});

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