vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?

在vite脚手架中, 引入时忽略.vue扩展名将导致错误// 一个名为tsc.vue的文件，import tsc from "./tsc.vue";// 上面的引入可以正常运行，但import tsc from "./tsc";// 将不起作用, 并提示错误//Internal server error: Failed to resolve import "./tsc" from "somewhe

余栀丶

44384人浏览 · 2021-05-07 14:41:11

余栀丶 · 2021-05-07 14:41:11 发布

在vite脚手架中, 引入时忽略.vue扩展名将导致错误

// 一个名为tsc.vue的文件，
import tsc from "./tsc.vue";
// 上面的引入可以正常运行，但
import tsc from "./tsc";
// 将不起作用, 并提示错误
//  Internal server error: Failed to resolve import "./tsc" from "somewhere.js". Does the file exist?

这是因为vite已不再默认忽略.vue扩展名

配置vite使其忽略 .vue 扩展名

但是 vite 有忽略扩展名的配置项, 可以通过手动配置使其可以忽略 .vue 扩展名(不建议这么做)

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
    // ...其他配置项
    resolve: {
      // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
  })