Vite打包Vue项目导入单文件组件报错：Failed to load url

问题原因 #

这不是Vite的问题，核心原因是Vite默认不会自动解析未显式声明的.vue文件扩展名。你导入组件时只写了文件名welcome-chat，没有加上.vue后缀，导致Vite无法识别这是一个Vue单文件组件。

解决方案 #

方案1：导入时显式添加.vue后缀 #

直接修改router.js中的导入语句，补上.vue后缀即可：

import welcomeChat from "@/views/welcome-chat.vue"

方案2：配置Vite自动识别.vue后缀 #

如果不想每次都写后缀，可以在vite.config.js的resolve选项中添加extensions配置，让Vite自动解析.vue文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))    
    },
    // 添加extensions配置，包含.vue后缀
    extensions: ['.vue', '.js', '.jsx', '.json']
  }
})

注：Vite默认的extensions包含.js、.mjs、.jsx、.ts、.tsx、.json，但不包含.vue，所以需要手动添加进去，数组顺序代表解析优先级。

内容的提问来源于stack exchange，提问作者Robert