Why do Vue 2 and Vue 3 need such different config files?

Vue 3 projects scaffolded with create-vue use Vite as the build tool, configured through vite.config.ts with the @vitejs/plugin-vue plugin, while Vue 2 projects (scaffolded with the older Vue CLI) use a webpack-based toolchain configured through vue.config.js, which has its own distinct options shape (configureWebpack, devServer) layered on top of Vue CLI's webpack preset.

Why does the Vue 2 proxy config need changeOrigin: true but the Vue 3 one doesn't?

Vite's server.proxy accepts a plain string target as shorthand and handles origin rewriting sensibly by default for that shorthand form; Vue CLI's underlying webpack-dev-server proxy config uses the object form, where changeOrigin: true needs to be set explicitly so the proxied request's Host header matches the target server rather than leaking the original dev server's host, which many backends check.

Can I use Vite with Vue 2?

Not with this tool's Vue 2 output, since it's written for Vue CLI's webpack-based configuration specifically. There is a community Vite plugin for Vue 2 (vite-plugin-vue2), but it's a distinct setup from Vue CLI's vue.config.js and would need its own vite.config.ts, similar in shape to this tool's Vue 3 output.

How do I know which config file my project actually needs?

If your project has a vite.config.ts (or .js) at the root and package.json shows "vue": "^3", use the Vue 3 output; if it has vue.config.js and "vue": "^2", use the Vue 2 output.

Vue Config Generator - vite.config.ts or vue.config.js

Overview

Introduction

Vue 2 and Vue 3 projects are typically built with entirely different tooling, Vue CLI's webpack-based pipeline for Vue 2, Vite for Vue 3, so a config snippet copied from the wrong version's documentation often uses options that don't exist in the other tool at all.

This tool generates the correct config file for whichever Vue version you're on: a vite.config.ts for Vue 3, or a vue.config.js for Vue 2, both with matching alias and dev-server-proxy setup.

What Is Vue Config Generator (Vue 3 / Vue 2)?

A dual-mode config generator: for Vue 3, it produces a vite.config.ts with the @vitejs/plugin-vue plugin, resolve.alias, and server.proxy; for Vue 2, it produces a vue.config.js with devServer.proxy and configureWebpack.resolve.alias, matching Vue CLI's webpack-based configuration surface.

Both outputs cover the same two practical needs, path aliasing and a local API proxy, but expressed through each tool's own distinct configuration shape.

How Vue Config Generator (Vue 3 / Vue 2) Works

Selecting Vue 3 produces Vite's `defineConfig()` shape with `plugins: [vue()]`, aliasing resolved via `path.resolve(__dirname, ...)`, and a proxy object under `server.proxy` using Vite's plain-string shorthand.

Selecting Vue 2 produces `module.exports = { devServer: { proxy: {...} }, configureWebpack: { resolve: { alias: {...} } } }`, with each proxy entry using webpack-dev-server's object form (target + changeOrigin: true) since that's the form Vue CLI's proxy configuration expects.

When To Use Vue Config Generator (Vue 3 / Vue 2)

Use it when setting up path aliases or an API proxy for a Vue project and you want the config written for the actual toolchain (Vite vs. Vue CLI/webpack) that project uses.

It's also useful for comparing the two versions' config shapes side by side when planning a Vue 2 → Vue 3 migration.

Often used alongside Vite Config Generator and Tailwind Config Generator.

Features

Advantages

Avoids mixing Vite-only options into a Vue CLI project (or vice versa), a common source of confusing "unknown option" errors when copying config from the wrong version's tutorial.
Produces the correct proxy shape for each toolchain, including changeOrigin: true where Vue CLI's webpack-dev-server proxy actually needs it.
Covers both alias and proxy setup together, the two customizations almost every real Vue project ends up needing early on.

Limitations

Doesn't cover a Vite+Vue2 setup via the community vite-plugin-vue2 plugin; the Vue 2 output specifically targets Vue CLI's webpack-based tooling.
Covers alias and proxy configuration only; other Vite/Vue CLI options (build target, CSS preprocessing, PWA plugins) need manual configuration beyond this output.

Examples

Vue 3 with an alias and API proxy

Input

vueVersion: vue3, aliases: [{alias: "@", path: "src"}], proxies: [{path: "/api", target: "http://localhost:4000"}]

Output

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "node:path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  server: {
    proxy: {
      "/api": "http://localhost:4000",
    },
  },
});

Best Practices & Notes

Best Practices

Keep the same alias (commonly @ -> src) consistent between the build config and jsconfig.json/tsconfig.json's paths field, so editor tooling and the actual build resolve imports the same way.
Set changeOrigin: true on any Vue CLI proxy target that checks the Host header (most real backends do), to avoid confusing, hard-to-diagnose proxy failures.
Double-check which Vue major version a project actually uses before applying either output; mixing them produces options the running tool doesn't recognize.

Developer Notes

Vite's server.proxy accepts either a plain target-URL string (used here) or a fuller object form with its own changeOrigin/rewrite/etc. options; the string shorthand is sufficient for the common case of forwarding a path prefix to a single backend origin. Vue CLI's devServer.proxy, inherited from webpack-dev-server, always expects the object form per path key, which is why this generator's Vue 2 output explicitly sets `target` and `changeOrigin: true` per proxy entry rather than using a bare string.

Vue Config Generator (Vue 3 / Vue 2) Use Cases

Setting up a path alias and local API proxy for a new Vue 3 + Vite project
Setting up the equivalent alias and proxy configuration for an existing Vue 2 + Vue CLI project
Comparing Vue 2 and Vue 3 config shapes side by side when planning a version migration

Common Mistakes

Pasting Vite's `server.proxy` syntax into a Vue CLI project's vue.config.js, where the correct key is `devServer.proxy` with a different (object-based) value shape entirely.
Forgetting changeOrigin: true in a Vue CLI proxy entry, causing the proxied backend to see the dev server's own Host header instead of its expected one.

Tips

Use the Vite Config Generator directly if you need broader Vite options beyond Vue-specific alias/proxy setup, like build.outDir or additional framework plugins.

Vue Config Generator (Vue 3 / Vue 2)