Migrating a Legacy Project from Vue CLI to Vite

Recently, a ticket was added to our sprint with the goal of reducing packages with critical and high vulnerabilities in a legacy project. The task involved migrating a Vue 2 project using Vue CLI as the build tool to Vite.

This was an excellent opportunity to modernize the stack and leverage the performance benefits Vite offers. In this article, I'll share the main steps I followed to complete the migration.

---

What is Vite?

Vite (pronounced "veet") is a build tool designed to provide a faster (and it’s really fast) and leaner development experience for modern web projects.

With Vite, you get significantly shorter build times, a blazing-fast dev server, and a simplified configuration process.

---

Migration Steps

1. Updating the package.json

The first step was removing all Vue CLI dependencies from the project. This included Babel-related packages, the babel.config.js configuration file, and the core-js dependency.

//package.json
"@vue/cli-plugin-babel": "~5.0.8", //remove
"@vue/cli-plugin-e2e-nightwatch": "~5.0.8", //remove
"@vue/cli-plugin-eslint": "~5.0.8", //remove
"@vue/cli-plugin-unit-jest": "~5.0.8", //remove
"@vue/cli-service": "~5.0.8", //remove

"core-js": "^3.6.4", //remove
"@babel/core": "^7.8.4", //remove
"babel-core": "^7.0.0-bridge.0", //remove
"babel-jest": "^25.1.0", //remove

If your ESLint configuration uses "babel-eslint" as the parser, you’ll need to replace it.

//package.json
"babel-eslint": "^10.0.3", //remove

I migrated my ESLint configuration from .eslintrc to the modern eslint.config.mjs format and updated ESLint to version 8, which I highly recommend.

npm install eslint@8 eslint-plugin-vue@8 --save-dev

npx @eslint/migrate-config .eslintrc.js

After cleaning up these dependencies, I added Vite and a plugin for Vue integration:

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

---

2. Setting Up Vite

Like many other libraries, Vite uses a configuration file (vite.config.js) at the root of the project to define build and development options. Here's a simple starting point:

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue2()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

---

3. Moving and Updating index.html

In Vue CLI, the index.html file is typically located in the public folder. However, Vite expects it at the root of the project. Move the file to the root and update any path references as needed.

mv public/index.html index.html

<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!--add-->
<link rel="icon" href="/favicon.ico" />

<!--add-->
<script type="module" src="/src/main.js"></script>

The main.js is included because we're no longer automatically injecting.

---

4. Updating Environment Variables

Vite handles environment variables differently. Ensure you update or create .env files and prefix all variables you want to expose with VITE_. For example:

VITE_API_URL=https://api.example.com

// router/index.js
//remove
base: process.env.BASE_URL, 
//add
base: import.meta.env.BASE_URL,

---

5. Updating the Scripts

Lastly, I updated the scripts in the package.json to use the Vite binary instead of Vue CLI. Here's how they look now:

//from
"scripts": {
  "serve": "vue-cli-service serve --port 8084",
  "dev": "npm run serve",
  "build": "vue-cli-service build",
  "test:unit": "vue-cli-service test:unit",
  "test:e2e": "vue-cli-service test:e2e --headless",
  "lint": "vue-cli-service lint",
  "test": "npm run test:unit && npm run test:e2e"
},


//to
"scripts": {
  "serve": "vite --port 8084",
  "dev": "npm run serve",
  "build": "vite build",
  "test:e2e": "nightwatch --headless",
  "test:unit": "vitest --run",
  "test": "npm run test:unit && npm run test:e2e",
  "lint": "eslint ."
},

---

With these changes, you can now run your Vue 2 project using Vite and enjoy all the benefits it brings, especially improved build performance.

---

Next Steps

In my next article, I'll share how I enabled Nightwatch without the Vue CLI plugin and migrated Jest to Vitest. Stay tuned!

---

If you have any questions or want to share your own experiences with Vite, feel free to leave a comment! 🚀