Vue2项目中使用Vite前端构建

1. 前置条件

Node版本要求：必须node 18+以上

vite 配置:

Vue版本 < 2.7：安装vite-plugin-vue2

Vue版本 > 2.7：安装@vitejs/plugin-vue2

2. 安装组件

js 复制代码

vue < 2.7:
npm install vite vite-plugin-html vite-plugin-vue2 --save-dev

vue > 2.7
npm install vite vite-plugin-html @vitejs/plugin-vue2 --save-dev

3. 操作

新建并编辑vite.config.js

js 复制代码

// vue<2.7
// 导入 Vite 的 defineConfig 函数，用于定义配置对象
import { defineConfig } from "vite";

// 导入 Vite 插件，用于支持 Vue 2.x 项目
import { createVuePlugin } from "vite-plugin-vue2";

// 导入 Vite 插件，用于处理 HTML 文件并支持 EJS 模板语法
import { createHtmlPlugin } from "vite-plugin-html";

// 使用 defineConfig 定义 Vite 配置
export default defineConfig({
  // 配置插件
  plugins: [
    // 启用 Vue 2.x 支持插件
    createVuePlugin(),

    // 启用 HTML 文件处理插件
    createHtmlPlugin({
      // 指定项目的入口文件（通常是 src/main.js）
      // 配置后，Vite 会自动在生成的 HTML 文件中注入对该入口文件的引用
      entry: "src/main.js",

      // 指定 HTML 模板文件（默认是 index.html）
      // 如果模板文件不在根目录，可以在这里指定路径
      template: "index.html",

      // 配置需要注入到 HTML 文件中的数据
      inject: {
        data: {
          // 基础路径变量，可以在 HTML 中使用 <%= BASE_URL %> 引用
          // 例如：<link rel="icon" href="<%= BASE_URL %>favicon.ico">
          BASE_URL: "/",

          // 模拟 Webpack 的 html-webpack-plugin 行为
          // 可以在 HTML 中使用 <%= htmlWebpackPlugin.options.title %> 引用
          htmlWebpackPlugin: {
            options: {
              title: "vue2 使用 vite", // 页面标题
            },
          },

          // 自定义变量，可以在 HTML 中使用 <%= title %> 引用
          title: "vue2 使用 vite",
        },
      },
    }),
  ],

  // 配置模块解析规则
  resolve: {
    // 配置路径别名
    alias: [
      {
        // 将 @ 映射到 /src 目录
        // 例如：import MyComponent from '@/components/MyComponent.vue'
        find: "@",
        replacement: "/src",
      },
    ],
  },
});

js 复制代码

// vue > 2.7
// 导入 Vite 的 defineConfig 函数，用于定义配置对象
import { defineConfig } from "vite";

// 导入 Vite 插件，用于支持 Vue 2.7 及以上版本
// 注意：Vue 2.7 及以上版本使用 @vitejs/plugin-vue2
import vue from "@vitejs/plugin-vue2";

// 导入 Vite 插件，用于处理 HTML 文件并支持 EJS 模板语法
import { createHtmlPlugin } from "vite-plugin-html";

// 使用 defineConfig 定义 Vite 配置
export default defineConfig({
  // 配置插件
  plugins: [
    // 启用 Vue 2.7 及以上版本支持插件
    vue(),

    // 启用 HTML 文件处理插件
    createHtmlPlugin({
      // 指定项目的入口文件（通常是 src/main.js）
      // 配置后，Vite 会自动在生成的 HTML 文件中注入对该入口文件的引用
      entry: "src/main.js",

      // 指定 HTML 模板文件（默认是 index.html）
      // 如果模板文件不在根目录，可以在这里指定路径
      template: "index.html",

      // 配置需要注入到 HTML 文件中的数据
      inject: {
        data: {
          // 基础路径变量，可以在 HTML 中使用 <%= BASE_URL %> 引用
          // 例如：<link rel="icon" href="<%= BASE_URL %>favicon.ico">
          BASE_URL: "/",

          // 模拟 Webpack 的 html-webpack-plugin 行为
          // 可以在 HTML 中使用 <%= htmlWebpackPlugin.options.title %> 引用
          htmlWebpackPlugin: {
            options: {
              title: "vue2 使用 vite", // 页面标题
            },
          },

          // 自定义变量，可以在 HTML 中使用 <%= title %> 引用
          title: "vue2 使用 vite",
        },
      },
    }),
  ],

  // 配置模块解析规则
  resolve: {
    // 配置路径别名
    alias: [
      {
        // 将 @ 映射到 /src 目录
        // 例如：import MyComponent from '@/components/MyComponent.vue'
        find: "@",
        replacement: "/src",
      },
    ],
  },
});

4. 编辑 package.json脚本

js 复制代码

  "scripts": {
    "serve": "vite --host",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

5. 总结

Vite 的优势：Vite 提供了更快的开发服务器启动速度和热更新速度，适合现代前端开发。

markdown 复制代码

-   Vue < 2.7 使用 `vite-plugin-vue2`。
-   Vue > 2.7 使用 `@vitejs/plugin-vue2`。

HTML 模板处理 ：通过 vite-plugin-html 插件，可以在 HTML 文件中使用 EJS 语法注入变量（如页面标题、基础路径等）。
路径别名 ：通过配置 resolve.alias，简化文件引用路径（如 @ 映射到 /src）