Practical Evaluation of Vite with Vue 2.7: Migration, Configuration, and Performance Comparison

Introduction: The author explores using Vite with Vue 3 features and the recent Vue 2.7 release, which backports many Composition API capabilities, aiming to improve development experience for an existing Vue 2 project.

Experiment: A small experiment (Rice Festival activity) was set up to test SFC setup syntax, Vite's current state, and production stability. The conclusion: feature compatibility is good, but production builds have many pitfalls.

Project Setup: Using Vite Getting Started, the author leveraged the awesome-vue starter and added essential plugins. The package.json snippet shows dependencies such as @sentry, @vueuse/core, axios, and devDependencies including @vitejs/plugin-legacy, @vitejs/plugin-vue2, unplugin-auto-import, unplugin-vue-components, and vite.

{
  "dependencies": {
    "@sentry/browser": "^5",
    "@sentry/integrations": "^5",
    "@vueuse/core": "^9.0.2",
    "axios": "^0.27.2",
    "nejsbridge": "^1.7.19",
    "vue": "^2.7.8",
    "vue-clipboard2": "^0.3.3",
    "vue-router": "^3.5.4"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.25.2",
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "autoprefixer": "^10.4.8",
    "eslint": "^7.32.0",
    "less": "^4.1.3",
    "nei-ts-helper": "^0.1.3",
    "terser": "^5.4.0",
    "typescript": "^4.6.4",
    "unplugin-auto-import": "^0.10.1",
    "unplugin-vue-components": "^0.21.2",
    "vite": "^3.0.4",
    "vue-tsc": "^0.38.4"
  }
}

Key Plugins: unplugin-auto-import automatically imports Vue, Vue Router, and @vueuse functions with TypeScript support; unplugin-vue-components auto‑registers components for Vue 2.7. Configuration examples for vite.config.js are provided.

// vite.config.js (AutoImport plugin)
plugins: [
  AutoImport({
    imports: [
      'vue',
      'vue-router',
      '@vueuse/core'
    ],
    eslintrc: {
      enabled: false,
      globalsPropValue: true
    },
    dts: 'src/auto-imports.d.ts'
  }),
  // ...other plugins
]

// vite.config.js (Components plugin)
plugins: [
  Components({
    transformer: 'vue2', // required for vue2.7
    dirs: ['src/components'],
    extensions: ['vue'],
    dts: 'src/components.d.ts'
  }),
  // ...other plugins
]

Business Development: The author shows a <script setup> component using computed properties and CSS variable injection, highlighting the convenience of the plugins.

<script setup>
import { getNosThumbWebP } from '@/common/utils';
const props = defineProps(['blogNickName']);
const name = computed(() => (props.blogNickName ? `@${props.blogNickName}` : '你的'));
const bgUrl = `url(${getNosThumbWebP('https://lofter.lf127.net/xxx/header.png', { thumbnail: '1125x0' })})`;
</script>

<template>
  <div class="header">
    <div class="user-name">{{name}}</div>
  </div>
</template>

<style scoped lang="less">
  .header {
    width: 100%;
    height: 1333px;
    background-image: v-bind(bgUrl);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .user-name { /* ... */ }
  }
</style>

Build and Compatibility: Discusses browser compatibility, the need for @vitejs/plugin-legacy for older browsers, and the importance of setting build.target. Shows a script that detects modern browsers and loads legacy polyfills when necessary.

// Detect modern browsers and load legacy polyfills
<script type="module">
try {
  import.meta.url;
  import("_").catch(() => 1);
} catch (e) {}
window.__vite_is_modern_browser = true;
</script>
<script type="module">!function(){
  if(window.__vite_is_modern_browser) return;
  console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported");
  var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");
  n.src=e.src;
  n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))};
  document.body.appendChild(n);
}();</script>

Performance Comparison: A table compares webpack and Vite on dev run times, hot‑module replacement, request counts, and load times for various pages, indicating that Vite’s ESM approach does not always yield faster rendering without HTTP/2 or async chunking.

Observations: Vite acts as an aggregation layer over esbuild, Rollup, and various loaders; new projects benefit from Vite, while migrating large legacy webpack projects requires careful handling of plugins, environment variables, and configuration differences.

Conclusion: Vite is recommended for new projects, and migrating older projects offers opportunities to contribute plugins and improve the ecosystem.

References: awesome‑vue, unplugin-auto-import, unplugin, unplugin‑vue‑components, Vue 3 SFC Style CSS Variable Injection proposal, Vite browser compatibility guide, _VITE_ASSET issue, and Vite HMR troubleshooting.