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-risk vulnerabilities in a legacy project. This task involves migrating a Vue 2 project that uses the Vue CLI as the build tool to Vite.

This is a great opportunity to modernize your technology stack and take advantage of the performance benefits Vite offers. In this article, I will 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 indeed fast) and streamlined development experience for modern web projects.

With Vite, you get significantly reduced build times, a blazingly fast development server, and a simplified configuration process.

---

Migration steps

1. Update package.json

The first step is to remove all Vue CLI dependencies from the project. This includes Babel-related packages, the babel.config.js configuration file, and core-js dependencies.

<code>//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
</code>

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

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

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

<code>npm install eslint@8 eslint-plugin-vue@8 --save-dev

npx @eslint/migrate-config .eslintrc.js</code>

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

<code>npm install vite @vitejs/plugin-vue2 --save-dev</code>

---

2. Set up Vite

Like many other libraries, Vite uses a configuration file (vite.config.js) in the project root directory to define build and development options. Here's an easy place to start:

<code>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))
    }
  }
});</code>

---

3. Move and update index.html

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

<code>mv public/index.html index.html</code>

<code><link href="<%=%20BASE_URL%20%>favicon.ico" rel="icon">  <link href="/favicon.ico" rel="icon"></code>

Include main.js because we no longer auto-inject.

---

4. Update environment variables

Vite handles environment variables differently. Make sure to update or create the .env file and add the VITE_ prefix to all variables you want to expose. For example:

<code>VITE_API_URL=https://api.example.com</code>

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

---

5. Update script

Finally, I updated the script in package.json to use the Vite binaries instead of the Vue CLI. They look like this now:

<code>//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 ."
},</code>

---

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

---

Next Steps

In my next article, I will share how to enable Nightwatch without the Vue CLI plugin and migrate 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! ?

The above is the detailed content of Migrating a Legacy Project from Vue CLI to Vite. For more information, please follow other related articles on the PHP Chinese website!