为什么在使用 Vue 3 迁移构建时 Vite 找不到 '.vue' 加载器？

Question

我正在尝试使用迁移构建和 vite 将 Vue 2 项目升级到 Vue 3 (https://v3.vuejs.org/guide/migration/migration-build.html#overview)

我已经完成了第 1-4 步（虽然跳过了第 4 步，因为没有使用打字稿）。此时，我收到以下错误：

src/main.js:3:16: error: No loader is configured for ".vue" files: src/App.vue

尽管有消息，但问题似乎与 @ 别名有关，因为如果我在 main.js 中将 import App from '@/App.vue'; 更改为 import App from './App.vue';，它就可以正常工作。有任何想法吗？我也尝试将别名更改为 /src/。

一方面，这似乎是一个简单的修复，但另一方面，整个项目中还有许多其他导入必须重写。

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"
  }
}

我无法在 codesandbox 中复制运行（它似乎根本不喜欢 vite.config.js 中的别名语句）。但是这个 repo 显示了行为：https://github.com/dovrosenberg/vite-vue-alias-issue

当使用此 repo 时，错误有时会发生变化（对我来说没有明显的原因）： Internal server error: Failed to resolve import "@/App.vue" from "src/main.js". Does the file exist?'

Answer 1

@ 的 resolve.alias 键不能包含斜线：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  ⋮
  resolve: {
    alias: {
      // '@/': path.resolve(__dirname, './src/'), ❌
      '@': path.resolve(__dirname, './src/'), ✅
      ⋮
    },
  },
});

demo

为什么在使用 Vue 3 迁移构建时 Vite 找不到 '.vue' 加载器？

Why is '.vue' loader not found by Vite when using Vue 3 migration build?

javascript

vue.js

vuejs2

vuejs3

vite