Vite学习记录

---

最近重新整理了一套 Vue3 的后台模板，和以前项目最大的不同就是构建工具从 webpack 换成了 Vite，这里先记录一下 Vite 的一些基础使用

之前写 Vue 项目的时候，用的比较多的是 vue-cli，里面很多配置都是 webpack 那一套。

现在新项目基本都开始使用 Vite 了，刚开始看起来配置少了很多，但是很多写法也发生了变化，比如环境变量、路径别名、scss 全局样式、动态引入页面等等。

安装

如果是新项目，可以直接使用官方命令创建：

npm create vite@latest

然后选择 Vue 就可以了。

我这里是已经整理好的后台模板，所以直接看 package.json 中的命令：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

可以看到开发环境启动已经不是以前的 vue-cli-service serve，而是直接执行 vite。

配置文件

Vite 的配置文件是 vite.config.js，我这个模板里面的配置如下：

import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {
  const root = process.cwd();
  const viteEnv = loadEnv(mode, root);

  return {
    base: viteEnv.VITE_BASE_PATH,
    plugins: [vue()],
    server: {
      host: '0.0.0.0',
      port: 8848
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/style/main.scss";`
        }
      }
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  };
});

整体看下来，其实后台项目常用的配置就几个：

1. base：项目部署路径
2. plugins：Vue 插件
3. server：本地开发服务配置
4. css：scss 全局样式
5. resolve.alias：路径别名

环境变量

以前 vue-cli 中的环境变量一般是 VUE_APP_ 开头，现在 Vite 中需要使用 VITE_ 开头。

例如：

VITE_BASE_PATH=/
VITE_API_BASE_URL=/api

在代码里面使用：

import.meta.env.VITE_BASE_PATH

这里需要注意，不再是 process.env，而是 import.meta.env。

如果要在 vite.config.js 里面读取环境变量，可以使用 loadEnv：

export default defineConfig(({ mode }) => {
  const viteEnv = loadEnv(mode, process.cwd());

  return {
    base: viteEnv.VITE_BASE_PATH
  };
});

路径别名

后台项目中经常会使用 @ 指向 src 目录。

在 Vite 中可以这样配置：

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
}

使用的时候还是和以前一样：

import tableMixin from '@/utils/tableMixin.js';

scss全局样式

以前项目中经常会有全局变量、公共 mixin 等样式文件，如果每个页面都手动引入会比较麻烦。

Vite 中可以通过 additionalData 注入：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/assets/style/main.scss";`
    }
  }
}

这样每个 .vue 文件的 scss 中都可以使用公共样式里的变量或方法。

动态引入

这个是我觉得后台模板里面比较重要的一个点。

以前 webpack 中经常会用 require.context，但是 Vite 中没有这个方法，对应的写法是 import.meta.glob。

比如我这个后台模板中需要根据后端菜单动态匹配页面：

const modules = import.meta.glob('/src/views/pages/**/*.vue');

这样就可以把 src/views/pages 下面的页面全部收集起来，后面根据后端返回的菜单路径去匹配对应的组件。

这个功能在动态路由里面会很有用，后面会单独记录一篇。

和webpack的一些区别

我自己的感觉主要是下面几点：

1. 启动速度明显快很多，尤其是后台项目页面多的时候
2. 配置文件更轻，常用配置不用写很多
3. 环境变量换成了 VITE_ 和 import.meta.env
4. 动态引入从 require.context 换成了 import.meta.glob
5. 默认更偏向 ESM，所以很多写法也会更现代一点

总结

Vite 本身没有很复杂，但是从旧项目切过来的时候，还是有几个地方需要适应。

我觉得最常用的就是：环境变量、别名、scss 全局样式、动态导入。

这篇先简单记录一下 Vite 的基础配置，后面开始记录基于 Vite 和 Vue3 整理后台模板的过程。

以上就是我对 Vite 的一些理解，如有错误，欢迎大佬指出。