Usage in existing Vue 2 project

[kolaente]

Is it possible to use vite in an existing Vue 2 project? The docs only mention how to get started with a new project.

[Niputi]

use this plugin https://github.com/underfin/vite-plugin-vue2

[kolaente]

Thanks for pointing me to that. It seems to kind of work, just two issues:

Imports prefixed with @ (from ./src) don't work:

$  npx vite build
building for production...
✓ 3 modules transformed.
[vite]: Rollup failed to resolve import "@/components/modal/modal" from "src/main.js".

It looks like it can't resolve imports without the .vue file ending either: (for ex: import Modal from './components/modal/modal'):

$ npx vite build
building for production...
✓ 3 modules transformed.
Could not resolve './components/modal/modal' from src/main.js

Are those issues with the plugin or vite-specifics I need to configure properly?

[kolaente]

I was able to fix the issue with @ imports by adding

resolve: {
	alias: {'@': './src'},
},

to my vite.config.js file.

I also found https://vitejs.dev/config/#resolve-extensions, however it looks like simply adding extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] to the resolve config from above doesn't seem to fix it, but the error message is different:

$ npx vite build
building for production...
✓ 3 modules transformed.
Could not load ./src/components/modal/modal (imported by src/main.js): ENOENT: no such file or directory, open './src/components/modal/modal'
error during build:
Error: Could not load ./src/components/modal/modal (imported by src/main.js): ENOENT: no such file or directory, open './src/components/modal/modal'

The failing import in that case is import Modal from '@/components/modal/modal'

Any ideas?