vite: When I start using vite, the page shows 404

@cmcnicholas

is there some alternative to this, it really makes migrating a pain, we are at 40 minutes for a webpack build too 😦

First of all, are you using Vue2 or 3? The output from your npm install --force mentions both.

The easiest thing for you to do is

1. git clone a vite template for your Vue version, like this one
2. Copy your src folder into the template folder. Also, copy any static assets
3. Run npm install
4. Try running vite (npm run dev) and check for errors and try to resolve them.

Build systems are a pain in the ass, so piggybacking on work from someone else is highly recommended. Don’t waste your time trying to ‘fix’ your webpack build.

did you manage to get this to work for vue async imports too?

I don’t know what async imports are 😄 hope you’ll figure it out 🔥

thanks for this, unfortunately we have a big project, multiple project references with typescript, tooling etc. copying into one src is a bit problematic. I have managed to get vite working, works well, just seems when i update to the head version now @vitejs/plugin-vue has an explicit peer dependency to vue3 that wasn’t there before.

Don’t know if it’s relevant here, but I got 404 when starting up the dev server. The problem was that in vite.config.js, I had defined this since earlier:

resolve: {
    alias: [
        {
            find: '@',
            replacement: 'src',
        },
    ],
    extensions: ['.vue', '.js']
}

because I’m currently migrating my build to vite from Vue2 webpack template (vue init webpack), which historically has had that ruled defined to be able to do import Menu from @/components/Menu.

It made the script @vite/client not resolve. I removed this part of the config, find-replaced all @ with src manually and added .vue and .js to all imports, and vite started working again.