Vite构建工具

Vite介绍

Vite 是一个打包构建工具，它可以将项目中的浏览器不认识的代码文件，类似webpack转换为浏览器可认识的静态资源文件，打包构建结合了esbuild 和 rollup 构建工具实现!

相对于webpack构建工具，配置方面变的更简单，学习成本降低，构建速度变快！

Vite项目创建

创建一个Vue3项目

使用 npm 方式创建

npm init vite@latest my_project

使用 pnpm方式创建

pnpm create vite my_project

也可以通过--template指定框架来快速创建

pnpm create vite my_project --template vue

目录结构

├── README.md
├── index.html    # html 模版文件
├── package.json  # 项目配置文件
├── public        # 静态文件，该文件夹内的文件不会被打包处理
│   └── vite.svg
├── src           # 开发源代码的地方
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js   # main.js 入口文件
│   └── style.css
└── vite.config.js # vite 配置文件

根据命令行提示，选择要使用的框架，最终等待开发目录生成后，进入该文件夹，安装依赖，启动项目即可!

cd my_project
pnpm install # or npm install
pnpm run dev # or npm run dev

需要注意的是，在vue中，默认是不支持JSX语法的，需要通过安装插件来支持该语法类型!

pnpm i @vite/plugin-vue-jsx -D

然后在 vite.config.js 中引入插件进行注册!

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
});

使用jsx语法

import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => {
      return <div>hello jsx</div>;
    };
  }
})

创建一个Vue2项目

在vite项目中创建vue2项目时，还需要使用一个插件vite-plugin-vue2 ，它可以在项目中支持vue2的写法!

使用 pnpm 创建一个项目

pnpm create vite my_vue2_project

根据命令窗口交互提示，选择Vanilla ，Vanilla 在不使用任何框架的情况下创建一个工程项目，像vite配置文件等需要手动创建!

目录结构

├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
│   └── vite.svg
├── src
│   ├── App.vue    # 删除 src 内部默认文件后，创建App.vue
│   └── main.js
└── vite.config.js # 配置文件为手动创建

安装依赖

安装 vite-plugin-vue2 插件，和 vue2 最新版本!

这里需要注意的是，vue2的版本一定是最新的，避免版本不匹配的问题!

pnpm info vue versions

可以通过以上命令，来查看vue版本信息，获取vue2的最新版本!

pnpm i vite-plugin-vue2 -D

pnpm i vue@2.7.16 -S

创建vite配置文件

import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
export default defineConfig({
  plugins: [ createVuePlugin() ],
})

创建App.vue文件

<template>
  <div>
    <center>vite + vue2 {{ msg }}</center>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

修改main.js入口文件

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: (h) => h(App),
}).$mount("#app");

启动项目

pnpm run dev

CSS的使用方式

CSS变量与基本引用

在src目录下创建styles文件夹并分别创建一个index.css文件和一个variable.css文件!

variable.css用来存放一些css变量!

index.css用来引入变量，并对元素设置css样式!

variable.css

:root{
  --text-color: blue;
  --bg-color: white;
}

index.css

@import url("./variable.css");

body {
  @console.error("This is an error message");
  color: var(--text-color);
}

@console.error 是postcss中的一个插件，它可以通过js形式计算出css样式!

postcss 中有很多插件，比如单位转换px转rem，低版本浏览器css属性兼容，还有前缀插件等!

然后在main.js入口文件中引入index.css样式

main.js

import { createApp } from 'vue'
import './styles/index.css'
import App from './App.vue'

createApp(App).mount('#app')

CSS postcss的支持

postcss 是一个用 JavaScript 工具和插件转换 CSS 代码的工具!

@console 就是postcss中的插件之一，具体使用方式如下!

CSS Module

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象：

example.module.css

.red {
  color: red;
}

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: 'camelCaseOnly'），你还可以使用按名导入。

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  css: {
    modules: {
      localsConvention: 'camelCaseOnly'
    }
  }
});

import { applyColor } from './example.module.css'
document.getElementById('foo').className = applyColor

配置alias路径别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": "/src",
      "@assets": "/src/assets",
      "@components": "/src/components",
      "@views": "/src/views",
      "@router": "/src/router",
      "@store": "/src/store",
      "@utils": "/src/utils",
      "@styles": "/src/styles"
    }
  },
});

配置TypeScript集成

静态文件处理

静态资源，表示图片、媒体等相关文件内容，通过import方式来进行导入并使用!

基本使用

例如，在src目录中的assets文件夹内有一张图片

import vueSvg from './assets/vue.svg'

使用时，可以通过动态绑定的方式来引用，import 静态资源时，会返回一个编译后的的打包路径!

<img :src="vueSvg" class="logo vue" alt="Vue logo" />

url路径查询参数

添加一些特殊的查询参数可以更改资源被引入的方式：

assets 和 public 区别

eslint 和 prettier

1. eslint 是一个代码规范插件，它可以通过配置、预设方式来规定代码书写的规范检查!

2. prettier 是一个代码格式化插件，它需要在编辑器中安装这个插件，配合eslint来使用，可以设置编辑器在保存代码时，进行格式化代码块，来纠正代码到eslint的所定义的格式规范!

3. husky 是一个代码提交插件，它会在提交代码之前，去做eslint校验，保证代码的规范性，若存在不规范代码，则无法进行提交commit!

在使用eslint 和 prettier 之前，需要在开发工具中安装这两个插件，例如vscode 、 webstorm!

eslint 相关配置

eslint相关依赖安装

pnpm install eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D

eslint-config-standtard 是一个预设配置，也是一个eslint标准规范配置，通过extends配置属性，来继承这个标准的特性!

eslint-plugin-vue 是vue提供的一个关于vue代码编写规范配置插件

• 基础规则：eslint:recommended

• 代码风格：airbnb、standard、google

• 框架支持：react、vue、typescript

• 工具集成：prettier、import

根目录创建eslint配置文件

在项目根目录中新建".eslintrc.js" 配置文件，该配置文件，用来配置代码格式规范检测!

.eslintrc.js

module.exports = {
  extends: ['prettier', 'plugin:vue/vue3-recommended'],
  plugins: ['prettier'],
  env: {
    es6: true,
    browser: true
  },
  global: {
    postMessage: true
  },
  rules: {
    'prettier/prettier': 'error',
    'no-console': 'off',
    'no-debugger': 'off',
    'space-before-function-paren': 'off'
  }
}

extends 属性为继承的意思，可以字符串，或者是一个数组，来继承多个规范配置!

plugin:vue/vue3-recommended 是vue3标准规范配置，继承该规范后，代码规则检测，将以此规范进行代码检测!

pnpm install eslint-plugin-vue -D

plugin:vue/recommended 是 vue2 eslint 规则!

plugin:vue/vue3-recommended 是vue3 eslint 规则!

rules 用来配置eslint具体校验规则，如函数后括号之间是否留有空格(space-before-function-paren), off 代表关闭该项的检测!

global 用来配置全局变量代码，postMessage 表示在全局中可用，不需要去做eslint提示!

当开启eslint插件时，会发现项目中的许多文件，出现了报错提示，并提示我们去按照代码规范去纠正这些问题!

而这些问题，存在与多出，修改的文件内容也比较多，无法进行一个个修改，比较麻烦，因此，我们需要配合prettier格式化插件工具，来解决此问题!

prettier 相关配置

首先需要在开发工具中，安装此插件，之后，在vscode中来对format部分进行调整修改，确保保存时，进行代码格式化操作!

修改vscode配置

两部分修改，一部分是，保存代码时，进行格式化!另一个是，确保格式化工具选择的是prettier选项!

cmd+shift+p 调出vscode设置面板，在面板中搜素format，找到format on save 选项确保勾选!

另外就是搜索formatter 确保列出的选项内，选择的是prettier插件!

新建prettier配置文件

在项目根目录中新建".prettierrc"配置文件，该配置文件，可以通过json形式来配置，代码中格式化的规则!

.prettierrc

{
  "singleQuote": true, // 保留单引号
  "semi": false, // 去除结尾分号
  "trailingComma": "none" // 去除结尾逗号
}

配合eslint规则使用，不然会有冲突!

配置描述

示例配置

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}

配置scripts添加lint校验

在package.json文件中，配置scripts脚本，可以快速通过命令，来检测代码规范性! \

{
 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  }
}

配置打包构建时校验lint

{
 "scripts": {
    "dev": "vite",
    "build": "pnpm lint && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  }
}

只需要在 pnpm run build的时候之前跑下pnpm lint 做一个校验即可!

配置git提交时做lint校验

在此时，如果不配置git提交的话，可能会将校验不通过的代码，提交到代码仓库中，此时我们需要使用husky插件，来处理此问题!

husky 可以防止使用 Git hooks的一些不好的 commit 或者 push。

Husky是一个 Git Hook 工具，可以触发 Git 提交的各个阶段：pre-commit 、commit-msg 、pre-push 、pre-rebase等等。Husky支持所有 Git 钩子，可以根据项目的需要选择适当的钩子来运行自定义脚本。

安装husky依赖

pnpm install husky -D

初始化husky目录

npx husyk init

初始化会自动做两件事情:

安装husky相关钩子

npx husyk install

自定义脚本命令

当npx husky init初始化时，默认生成了一个 pre-commit 钩子脚本，且内部默认添加了一条命令，npm test，若想自定义，比如，在提交时，做一次eslint格式校验，那么需要打开这个pre-commit文件，进行编辑，并添加 pnpm lint 脚本保存即可!

这时候，当去做commit提交时，就会先执行 pnpm lint 去校验代码规范操作，若eslint校验失败，则不会提交代码!

其它husky命令使用

npx husky add .husky/pre-commit "npm run lint"

add 会.husky目录下生成 pre-commit 钩子脚本，并在脚本内部添加 npm run lint 命令!

vite中的环境变量

环境变量，就是在不同环境下定义的变量值，例如 开发环境 测试环境 生产环境等不同环境相关!

在vite中，可以通过import.meta.env的方式来获取环境对象

环境对象env

{
    "BASE_URL": "/",
    "DEV": true,
    "MODE": "development",
    "PROD": false,
    "SSR": false
}

import.meta.env 在打包环境(生产 测试)编译之后，实际上是不存在的，另外vite会将此代码转换为一个对象形式进行输出展示!

console.log("import.meta.env", import.meta.env)

编译后的代码，import.meta.env就不存在了，会被替换成一个对象!

console.log("import.meta.env", {
    "BASE_URL": "/",
    "DEV": true,
    "MODE": "development",
    "PROD": false,
    "SSR": false
})

自定义环境变量

自定义环境变量，就是可以在项目根目录下创建特定的文件，来表示不同环境下的变量，并且变量名必须以VITE_开头才行!

特定的文件可以有( .env 、 .env.development、 .env.development.local、.env.production 、 .env.test)

• .env # 所有情况下都会加载

• .env.local # 所有情况下都会加载，但会被 git 忽略

• .env.[mode] # 只在指定模式下加载

• .env.[mode].local # 只在指定模式下加载，但会被 git 忽略

环境中的mode模式

mode 用来指定vite环境的构建模式，则默认支持development(开发环境) 和 production(生产环境) ，当然也可以自定义mode，如test 或者是 staging ，通过--mode来实现!

test 和 staging

test 用于开发阶段测试环境

staging 用于交付阶段uat应用测试 环境

dev 和 preview

dev 是本地开发环境，主要是开发业务功能，测试等!

preview 是本地以production Mode去预览的一个环境，主要用来调试，在生产环境出现的问题!

这两中 mode 都会在本地启动一个服务，进行本地项目预览，但是preview 的 env环境是 production，而dev 的 env环境是，development!

vite 构建命令的相关参数

dev 常用参数

build 常用参数

vite中HMR热更新功能

HMR(热更新)，当我们修改页面中的内容时，不去刷新页面，而自动将改动的地方进行变更!

vite中开发vue项目，已经默认有了热更新操作，像 vue 页面以及页面中的样式，都会及时得到修改的反馈!

手动完成一个更新操作

通过 import.meta.hot 来完成，dom片段的局部更新操作!

import "./style.css";
import javascriptLogo from "./javascript.svg";
import viteLogo from "/vite.svg";
import { setupCounter } from "./counter.js";

export function render() {
  document.querySelector("#app").innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn moredwad
    </p>
  </div>
`;
  setupCounter(document.querySelector("#counter"));
}

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    newModule.render();
  });
}

import.meta.hot.accept 接受一个回调函数，其回调参数，为当前模块后产生变动后的新模块，然后调用render函数，进行重新渲染!

就是当前模块中的代码发生变动时，会触发 websockt ，然后获取accept中的回调参数，拿到新的模块中导出的render函数，进行调用重新渲染!

global import 批量导入

使用 import.meta.glob() 函数可以接受一个文件路径，来匹配多个文件，并返回一个键值对对象，key为文件路径名，而value则是，对应的import导入的文件内容!

基本使用

实现批量组件注册，如下components文件夹内的目录结构!

├── HelloWorld.vue
├── TestComp.vue
└── index.js

index.js

index.js 为批量注册的入口文件，通过import.meta.glob()函数来注册获取components内的所有.vue文件!

export function registerComponents(app) {
  const compoents = import.meta.glob('./*.vue')
  Object.keys(compoents).forEach(async (key) => {
    const componentName = key.replace('./', '').replace('.vue', '')
    const component = await compoents[key]()
    console.log('componentName', componentName)
    console.log('component', component.default)
    app.component(componentName, component.default)
  })
}

以上导入方式，是异步方法返回，比较繁琐，可以通过 配置对象来处理此问题 { eager: true }!

export function registerComponents(app) {
  const compoents = import.meta.glob('./*.vue', { eager: true })
  Object.keys(compoents).forEach((key) => {
    const componentName = key.replace('./', '').replace('.vue', '')
    const component = compoents[key]
    console.log('componentName', componentName)
    console.log('component', component.default)
    app.component(componentName, component.default)
  })
}

main.js

import { createApp } from 'vue'
import './styles/index.css'
import App from './App.vue'
import { registerComponents } from './components/index'
const app = createApp(App)
// 注册全局组件
registerComponents(app)

app.mount('#app')

文件路径引入规则

预编译

预编译，vite在启动之前呢，会把node_modules中的第三方依赖库进行一个cache缓存，当用到时，会从cache缓存中获取，从而提高加载运行的速度!

缓存的文件在node_modules > .vite文件夹中，当启动时，依赖包会加载到该目录当中!

除此之外，我们可以通过vite.config.js配置文件，来配置缓存优化策略，可以来指定哪些第三方库用来缓存，哪些第三方库不需要缓存的相关配置!

{
  optimizeDeps: {
    // include 匹配缓存依赖
    include: ['vue', 'vue-router', 'vuex'],
    // exclude 排除缓存依赖
    exclude: ['vue-demi']
  }
}

注意: vite 会默认扫描所有第三方库，然后进行缓存! 而 exclude 配置需要排除第三方依赖缓存时，需要注意，该依赖包是否有大量的功能作为导出，例如 lodash ，该依赖包，内部提供了，很多utils工具函数，若不进行cache，会导致页面加载时卡顿，闪烁的问题，因为浏览器会对lodash中所有的utils文件作为请求加载！

{
  optimizeDeps: {
    // include 匹配缓存依赖
    include: ['vue', 'vue-router', 'vuex'],
    // exclude 排除缓存依赖
    exclude: ['lodash']
  }
}

lodash 配置不缓存时，并且在某一个模块下，导入并引用lodash ，则浏览器会加载请求lodash中上百个模块文件!

vite 配置文件

基本配置

通用配置

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果使用 Vue.js
import path from 'path';
import react from '@vitejs/plugin-react'; // 如果使用 React
import viteImagemin from 'vite-plugin-imagemin'; // 图片压缩插件
import unocss from 'unocss/vite'; // CSS 工具类框架
import { visualizer } from 'rollup-plugin-visualizer'; // 构建分析

export default defineConfig({
  // 1. 基本配置
  root: process.cwd(),
  base: '/', // 公共基础路径，根据部署环境调整
  mode: 'development', // 或 'production'

  // 2. 插件配置
  plugins: [
    vue(), // Vue.js 插件
    // react(), // 如果使用 React，使用此行代替 vue()
    viteImagemin({
      // 图片压缩配置
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
            active: false
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    }),
    unocss(), // CSS 工具类框架
    // 构建分析插件，仅在生产构建时启用
    process.env.NODE_ENV === 'production' && visualizer()
  ].filter(Boolean), // 过滤掉可能的 undefined 值

  // 3. 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@views': path.resolve(__dirname, 'src/views'),
      '@store': path.resolve(__dirname, 'src/store'),
      // 根据项目结构调整
    }
  },

  // 4. 服务器配置
  server: {
    port: 3000, // 开发服务器端口
    host: 'localhost', // 开发服务器主机名
    open: true, // 是否自动打开浏览器
    cors: true, // 启用 CORS
    proxy: {
      // 代理配置，根据后端 API 调整
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 5. 优化配置
  build: {
    outDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源输出目录
    rollupOptions: {
      output: {
        // 代码分割配置
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]'
      },
      // 其他 Rollup 配置
    },
    minify: 'esbuild', // 代码压缩器，'terser' 或 'esbuild'
    terserOptions: {
      // Terser 配置
      compress: {
        drop_console: true, // 移除 console 语句
        drop_debugger: true // 移除 debugger 语句
      }
    },
    sourcemap: 'hidden', // Source map 配置，'none' | 'hidden' | 'inline'
    // 库模式配置（如果需要）
    lib: {
      entry: path.resolve(__dirname, 'lib/index.js'),
      name: 'MyLibrary',
      formats: ['cjs', 'esm']
    },
    // SSR 配置（如果需要）
    ssr: false
  },

  // 6. CSS 配置
  css: {
    modules: {
      // CSS Modules 配置
      scopeBehaviour: 'local',
      generateScopedName: '[local]___[hash:base64:8]'
    },
    preprocessorOptions: {
      // CSS 预处理器配置，如 Sass、Less
      scss: {
        // 例如，引入全局变量
        additionalData: `@import "@/assets/styles/global.scss";`
      }
    },
    // PostCSS 配置（如果需要）
    postcss: {
      plugins: [
        // 例如，自动添加前缀
        require('autoprefixer')
      ]
    }
  },

  // 7. 环境变量
  envPrefix: 'VITE_', // 环境变量前缀

  // 8. 其他配置
  logLevel: 'info', // 日志级别
  clearScreen: true, // 是否清除终端屏幕
  optimizeDeps: {
    include: ['@vue/compiler-sfc'], // 需要预构建的依赖
    exclude: ['lodash'] // 需要排除的依赖
  }
});

配置说明