vite 简介 - 技术栈

是什么

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

为什么

与webpack对比

构建方式： Webpack 通过构建整个项目的依赖图，将所有资源打包成一个或多个 bundle 文件，每次重启都需要打包。Vite 采用了即时编译的方式，在开发模式下通过浏览器原生支持的 ES Module 特性进行加载，不需要打包。
开发体验： Webpack 需要较多的配置，对复杂的项目来说，需要花费时间和精力来配置各种 loader 和 plugin。Vite 开箱即用，不需要复杂的配置即可快速启动项目，支持各种插件以满足特定需求。
热更新： Webpack 的热更新通常需要借助 webpack-dev-server 等插件，在一些情况下配置起来比较复杂。Vite 内置了基于浏览器原生模块热更新的开发服务器，无需额外配置即可实现快速的热更新。

怎么做

参考 blog.csdn.net/ThisEqualTh...

一、声明环境变量配置文件

在根目录下新建文件 .env.development以及 .env.production环境变量配置文件，如下。

js 复制代码

# 开发环境
VITE_MODE='development'

## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.dev.cn/'

二、vite.config.js基础配置

1、defineConfig()、loadEnv()

defineConfig() 工具函数默认支持 ts 的类型提示。

defineConfig() 可以接收一个配置对象{}为参数，也可以接收一个函数()=>{}为参数；当接收一个函数为参数时，函数的参数为一个条件对象。如下：

js 复制代码

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig((conditionalConfig) => {
  console.log(conditionalConfig);
  console.log(process.cwd(), __dirname); 
  console.log(process.cwd() === __dirname); 
  const { mode, command, isSsrBuild, isPreview } = conditionalConfig; // conditionalConfig对象包含4个字段
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  console.log(env);
  return {
    root: process.cwd(), // 项目根目录（index.html 文件所在的位置）
	base: env.VITE_MODE === 'production' ? './' : '/', // 开发或生产环境服务的公共基础路径。
  };
})

1 其中 conditionalConfig 对象包含 4 个字段，字段具体意义请参考：cn.vitejs.dev/config/。

__dirname和process.cwd() 都是用于获取文件系统路径的全局变量和方法，但它们有不同的含义和用途。

2 process.cwd() 是一个方法，用于获取 Node.js 进程的当前工作目录。它返回的是 Node.js 进程启动时所在的工作目录的绝对路径。这个路径通常是在启动 Node.js 应用程序时指定的，或者是在命令行中运行 Node.js 时的当前目录。

__dirname 是一个特殊的全局变量，用于获取当前模块的目录名。它返回的是包含当前模块文件目录的绝对路径。这个路径是相对于当前模块文件的位置的，所以它的值在不同模块中可能不同。

我的理解是 process.cwd()是在启动项目时动态获取的，__dirname则是根据当前文件的目录结构决定的。

3 loadEnv(mode, __dirname) 根据 mode 参数判断当前运行时环境，以获取不同环境配置的环境变量。

2、plugins配置项

默认配置只有 vue 插件，当你有其他需求时，需要自行导入其他插件；

比如说 vue 的开发者工具vite-plugin-vue-devtools，还有按需自动导入 API 组件插件 unplugin-auto-import。

3、server配置项

javascript 复制代码

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	server:{
      host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址，默认localhost，可设置为'0.0.0.0'或 true
      port: 9527,      // 端口号，默认5173
      open: true,	   // 开发服务器启动时，自动在浏览器中打开应用程序
      // 本地代理
      proxy: {
      	// 简写（字符串）
        '/mock': env.VITE_BASE_API,
        // 带选项写法（对象）
        '/api': {
          target: env.VITE_BASE_API,                      // 从环境变量文件取值
          changeOrigin: true,                             // 支持跨域
          rewrite: (path) => path.replace(/^\/api/, ''),  // 路径重写
        },
        // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
        '/socket.io': {
          target: 'ws://localhost:5174',
          // 支持 websocket
          ws: true,
        },
      }
	}
  }
})

4、resolve配置项

js 复制代码

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	resolve:{
	  alias: {
        // 第一种方式（最简洁）
        '@': path.resolve(__dirname, './src'),
        // 第二种方式
        '@style': fileURLToPath(new URL('./src/assets/style', import.meta.url)),
        '@images': fileURLToPath(new URL('./src/assets/images', import.meta.url)),
      },
      // 导入时想要省略的扩展名列表。 vite官方不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
      extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
	}
  }
})

5、css配置项

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如postcss-nesting）来编写简单的、符合未来标准的 CSS。

话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。

6、build配置项

js 复制代码

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	build:{
	  outDir: "dist",      // 默认dist（可省略），打包后输出文件
      assetsDir: "assets", // 默认assets（可省略），指定静态资源存放路径
      sourcemap: false,    // 默认false（可省略），是否构建sourcemap文件（生产不需要）
      minify: 'terser',    // 客户端默认构建是esbuild，需安装terser：`npm i -D terser`
      terserOptions: {
        // 生产环境移除console、debugger
        compress: {
          drop_console: true,   // 默认false
          drop_debugger: true,  // 默认true
        },
      },
  }
})

三、vite.config.js配置完整代码

js 复制代码

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite' // 按需自动加载API插件
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname);  // 加载不同环境下的环境变量
  return {
    root: process.cwd(), // 项目根目录（index.html 文件所在的位置）
    base: env.VITE_MODE === 'production' ? './' : '/', // 开发或生产环境服务的公共基础路径。
    // 插件配置
    plugins: [
      VueDevTools(),
      vue(),
      AutoImport({ imports: ["vue", "vue-router"] }),
    ],
    // 开发服务配置
    server: {
      host: '0.0.0.0', // 默认localhost
      port: 9527,
      open: true,
      proxy: {
        // 简写（字符串）
        '/mock': env.VITE_BASE_API,
        // 带选项写法（对象）
        '/api': {
          target: env.VITE_BASE_API,                      // 从环境变量文件取值
          changeOrigin: true,                             // 支持跨域
          rewrite: (path) => path.replace(/^\/api/, ''),  // 路径重写
        },
        // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
        '/socket.io': {
          target: 'ws://localhost:5174',
          // 支持 websocket
          ws: true,  
        },
      }
    },
    resolve: {
      // 文件路径别名，当使用文件系统路径的别名时，请始终使用绝对路径。
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@style': path.resolve(__dirname, './src/assets/style'),
        '@images': path.resolve(__dirname, './src/assets/images'),
      },
      // 导入时想要省略的扩展名列表。 vite官方不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
      extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
    },
    css: {
      // 内联的 PostCSS 配置，格式同 postcss.config.js，也可以单独在根目录创建 postcss.config.js 进行配置
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 16, 	 // 1rem的大小
            propList: ['*'], // 需要转换的属性，*代表全部转换
          }),
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ],
          }),
        ]
      },
    },
    build: {
      outDir: "dist",      // 默认dist，打包后输出文件
      assetsDir: "assets", // 默认assets，指定静态资源存放路径
      sourcemap: false,    // 默认false，是否构建sourcemap文件（生产不需要）
      minify: 'terser',     // vite默认构建是esbuild,需安装terser npm i -D terser
      terserOptions: {
        // 生产环境移除console、debugger
        compress: {
          drop_console: true,   // 默认false
          drop_debugger: true,  // 默认true
        },
      },
    }
  }
})