正常創建Vue2項目

使用命令方式

vue create projectname

或 使用圖形方式

vue ui

安裝 vite 相關組件

安裝組件，此組件是開發依賴包。

注意：如果Vue的版本是 v2.7 以下 安裝

npm install vite vite-plugin-html vite-plugin-vue2 --save-dev

注意：如果Vue的版本是 v2.7 及以上 安裝

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

文件操作

1、將 public/index.html，移動到項目根下面，在根下面新建 vite.config.js 文件。

2、編輯 vite.config.js，加入以下代碼

import { defineConfig } from "vite"
// vue2.7 以下使用（舊項目使用）
// import { createVuePlugin } from "vite-plugin-vue2" 
// vue2.7 及以上使用，新項目使用（使用vuecli 新建的項目，package.json上顯示是的^2.6.14，其實是2.7.14）
import vue from "@vitejs/plugin-vue2"
import { createHtmlPlugin } from "vite-plugin-html"

export default defineConfig({
  plugins: [
    // vue2.7 以下使用
    // createVuePlugin(),
    // vue2.7 及以上使用
    vue(),
    createHtmlPlugin({
      // 入口文件：這里配置，就不需要在index.html中加入script標簽來引入
      entry: "src/main.js",
      // 首頁文件，如果要放到其它地方需配置它的路徑，否則不需要配置。默認：/index.html
      template: "index.html",
      // 需要注入 index.html ejs 模板的數據
      inject: {
        data: {
          // index.html  <link rel="icon" href="<%= BASE_URL %>favicon.ico">中的變量值
          BASE_URL: "/",
          // index.html <%= htmlWebpackPlugin.options.title %>中的變量值
          htmlWebpackPlugin: {
            options: {
              title: "vue2 使用 vite"
            }
          },
          // 自定義變量值，可以代替<%= htmlWebpackPlugin.options.title %>為<%= title %>
          title: "vue2 使用 vite"
        }
      }
    })
  ],
  resolve: {
    alias: [
      // 路徑中 @對的對應關系
      {
        find: "@",
        replacement: "/src"
      }
    ]
  }
})

3、注意 index.html 中的 <%= 變量%>，它中的變量一定要配置，不然運行要出錯！這個坑很坑?。。?/p>

4、編輯 package.json，修改 scripts項，加入 vite 啟動方式

運行界面

按 h 鍵顯示 2中的快捷鍵。按 o 鍵 在默認瀏覽器 打開 程序，按 q 鍵 退出程序。
之后大家就可以感受 vue2 中編譯和運行的流暢了！關于 vite 的發布（build)，自行查詢吧。