Vite简介

Vite是下一代前端开发与构建工具。
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。
它主要由两部分组成： 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。 你可以在 为什么选 Vite 中了解更多关于项目的设计初衷。
Vite中文网

据说Vite的作者就是Vue的作者尤大大，那么Vue+Vite肯定是绝配

兼容性

Vite 需要 Node.js 版本 >= 12.0.0。

搭建项目

可以使用任意一个包管理工具
npm：

$ npm init vite@latest

yarn：

$ yarn create vite

pnpm：

$ pnpm create vite

然后根据提示去配置项目，傻瓜式操作，之后进入项目目录

$ yarn

安装依赖

为项目配置一些常用插件

Vue3开发常用插件
百度文库

配置完之后的vite.config.js:

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
// element plus ui 组件自动导入 需要安装 elementplus依赖
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Components from "unplugin-vue-components/vite";
import { defineConfig, loadEnv } from 'vite';

// https://vitejs.dev/config/
export default ({ mode, command }) => {
  // mode: 命令行--mode 后带的参数 command 运行的命令
  const env = loadEnv(mode, process.cwd()); // Vite提供的加载环境变量的方法，会去加载根目录下.env.[mode]文件中定义的换进变量
  console.log(process.cwd());
  return defineConfig({
    plugins: [
      vue({
        script: {
          refSugar: true, // 开$ref语法糖 可以使用$ref代替ref.value
        },
      }),
      /**
         * 自动注册组件
         */
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'css' })],
        include: [/\.vue$/, /\.vue\?vue/],
        exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
      }),
      AutoImport({
        imports: ['vue', 'vue-router'], // 自动导入vue和vue-router相关函数
        dts: 'src/auto-import.d.js', // 生成 `auto-import.d.js` 全局声明
      })
    ],
    build: {
      outDir: 'dist',
      assetsInlineLimit: 1024,
      cssCodeSplit: true,
      chunkSizeWarningLimit: 1000,
      brotliSize: false, //关闭打包计算
      // Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混淆更快但构建后的文件相对更大。
      minify: 'terser',
      // 打包生产环境移除 console 和 debugger
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
      rollupOptions: {
        output: {
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
        },
      },
    },
  })
}

.env.[mode]文件实例

# 开发环境
VITE_APP_BASE_API = '/dev-api'
VITE_APP_TARGET = 'http://***.com'
VITE_APP_TI = ''