在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']
    }
  })

vite官网配置说明https://cn.vitejs.dev/config/#resolve-extensions

vite建议引入时不要忽略.vue扩展名

之所以 vite 不再默认支持忽略.vue扩展名, 是因为 “设计如此”, 参考github上相关 issue 中尤雨溪的回答
https://github.com/vitejs/vite/issues/178#issuecomment-630138450

虽然可以通过配置解决, 但建议老老实实在引入时填写完整的文件名才是正道

webstorm引入时配置不要忽略.vue扩展名

webstorm自动引入时会忽略掉.vue扩展名, 配置使其不要忽略
https://blog.csdn.net/u010281877/article/details/116492833

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐