Vite 完整版详解

1. 打包构建：

Vite 使用 Rollup 作为默认的构建工具。通过运行 npm run build 命令，Vite 会将应用程序的源代码打包成一个或多个优化的静态文件，以便在生产环境中进行部署。Vite 的构建过程会根据需要进行代码拆分、压缩和优化，以提供最佳的性能和文件大小。

# package.json
{"scripts": {"build": "vite build"}
}

2. 环境变量：

Vite 支持在项目中使用环境变量。您可以在项目的根目录下创建一个 .env 文件，并在其中定义您需要的环境变量。然后，在您的代码中，可以使用 import.meta.env 对象来访问这些环境变量。Vite 会根据当前的环境自动加载相应的环境变量文件，例如 .env.development、.env.production 等。

# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME=My App# main.js
console.log(import.meta.env.VITE_API_URL); // 输出：https://api.example.com
console.log(import.meta.env.VITE_APP_NAME); // 输出：My App

3. 模式：

Vite 支持两种模式：开发模式和生产模式。在开发模式下，Vite 会提供一个开发服务器，实现快速的冷启动和热重载，以便在开发过程中获得即时的反馈。在生产模式下，Vite 会对应用程序进行优化和打包，以提供更高的性能和更小的文件大小。

# package.json
{"scripts": {"dev": "vite","build": "vite build"}
}

4. 兼容老浏览器：

Vite 默认情况下不支持老版本的浏览器，因为它使用了一些现代的 JavaScript 特性和浏览器原生模块的功能。但是，您可以通过配置文件来启用对老浏览器的支持。通过设置 target 选项为 es2015，并使用 @vitejs/plugin-legacy 插件，您可以将您的应用程序转换为兼容老浏览器的代码。

# vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';export default defineConfig({plugins: [legacy({targets: ['ie >= 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime']})]
});

5. TypeScript 相关：

Vite 对 TypeScript 提供了原生的支持。您可以在项目中使用 TypeScript 来编写代码，并且 Vite 会自动识别和编译 TypeScript 文件。在使用 TypeScript 的同时，您可以享受到 Vite 带来的快速的冷启动和热重载的特性。

# main.ts
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');

6. 基本配置：

Vite 的基本配置可以通过一个名为 vite.config.js 的配置文件进行设置。在这个配置文件中，您可以自定义各种选项，例如入口文件、输出路径、插件配置等。您还可以根据需要使用不同的插件来扩展 Vite 的功能。

# vite.config.js
import { defineConfig } from 'vite';export default defineConfig({root: './src',base: '/my-app/',plugins: [],build: {outDir: '../dist',assetsDir: 'assets',sourcemap: true}
});

核心配置全集

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'path';export default defineConfig({root: resolve(__dirname, './src'),base: '/my-app/',build: {outDir: resolve(__dirname, './dist'),assetsDir: 'assets',sourcemap: true,rollupOptions: {external: ['axios'],output: {globals: {axios: 'axios'}}}},plugins: [vue(),legacy({targets: ['ie >= 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime']})],server: {port: 3000,proxy: {'/api': {target: 'https://api.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});

• root：指定项目的根目录路径。
• base：指定项目的基础路径，用于指定静态资源的引用路径。
• build：用于配置构建相关的选项，包括输出目录、静态资源目录、是否生成源映射等。
• plugins：用于配置 Vite 插件，例如 @vitejs/plugin-vue 和 @vitejs/plugin-legacy。
• server：用于配置开发服务器的选项，包括端口号、代理等。

此外，示例代码中还展示了一些其他的配置选项的使用：

• rollupOptions：用于配置 Rollup 的选项，例如外部依赖和全局变量。
• proxy：用于配置开发服务器的代理选项，用于将请求代理到其他服务器。

整体代码示例

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src')}},server: {port: 3000}
});

这是一个基本的 Vite 配置文件，包括了以下配置选项：

• plugins：使用 @vitejs/plugin-vue 插件来支持 Vue 单文件组件。
• resolve.alias：设置别名，将 @ 指向项目的 src 目录，方便在代码中使用绝对路径引入模块。
• server.port：设置开发服务器的端口号为 3000。

接下来，我们可以在 src 目录下创建一个简单的 Vue 应用：

<!-- App.vue -->
<template><div><h1>Hello Vite!</h1><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: 'Welcome to Vite!'};}
};
</script><style>
h1 {color: blue;
}
</style>

// main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

在项目根目录下运行 npm install 安装依赖，然后使用 npm run dev 启动开发服务器。在浏览器中打开 http://localhost:3000，您将看到一个简单的 Vue 应用，显示 “Hello Vite!” 和 “Welcome to Vite!”。