Currently in the process of upgrading a Vue 2 project to Vue 3 by utilizing the migration build and vite (https://v3-migration.vuejs.org/breaking-changes/migration-build.html#overview)
I've completed steps 1-4 (skipping 4 as I'm not using typescript). However, I am encountering the following error:
src/main.js:3:16: error: No loader is configured for ".vue" files: src/App.vue
Despite the message, it seems like the issue lies with the @ alias. When I change import App from '@/App.vue'; to import App from './App.vue'; in main.js, everything works fine. Any thoughts on this? I even attempted changing the alias to /src/.
On one hand, it appears to be an easy fix, but on the other hand, all the other imports throughout the project would need to be rewritten.
Main.js:
import Vue from 'vue';
import App from '@/App.vue';
Vue.config.productionTip = false;
let app = new Vue({
render: h => h(App)
}).$mount('#app');
vite.config.js
import { defineConfig } from 'vite';
import createVuePlugin from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [
createVuePlugin({
template: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
}),
],
resolve: {
alias: {
'@/': path.resolve(__dirname, './src/'),
'vue': '@vue/compat',
},
},
});
package.json
{
"name": "xxx",
"version": "0.1.0",
"dependencies": {
"@vue/compat": "^3.1.0",
"vue": "^3.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.1.0",
"vite": "^2.4.1"
}
}
Unfortunately, I was unable to replicate the issue in codesandbox (it seems to have trouble with the alias statements in vite.config.js). However, you can observe the behavior in this repository: https://github.com/dovrosenberg/vite-vue-alias-issue
Sometimes the error changes unexpectedly when using this repository to:
Internal server error: Failed to resolve import "@/App.vue" from "src/main.js". Does the file exist?'