标题重写如下：遇到同一文件夹中存在index.vue文件时，在Vue 3和Vite中使用无文件扩展名导入index.ts文件时会产生错误链接

Question

<p>如何在同一个文件夹中有另一个index.vue文件的情况下，使用vue 3和vite导入index.ts文件而不指定文件扩展名？</p> <p>我正在尝试导入组件：</p> <pre class="brush:php;toolbar:false;">import { Component } from '@/app/some_component'</pre> <pre class="brush:php;toolbar:false;">src | └─── app │ └───some_component │ index.ts │ index.vue │ ...</pre> <p>但是Webstorm默认引用index.vue文件。</p> <p>所以，如何让Webstorm默认导入<strong>index.ts</strong>文件？</p> <p><strong>P.S.</strong> 顺便说一下，当我构建应用程序时一切正常，这似乎是Webstorm的链接问题。</p> <p>这是<strong>vite.config.ts</strong>的内容</p> <pre class="brush:php;toolbar:false;">从 'vite' 导入 { DefineConfig } 从“路径”导入路径 从 '@vitejs/plugin-vue' 导入 vue 从“vite-tsconfig-paths”导入 tsconfigPaths 导出默认的defineConfig({ 插件：[vue()、tsconfigPaths()]、 服务器： { 主持人：真实， 端口：5000， }, 预览： { 端口：8000 }, 解决： { 别名： { '@': path.resolve(__dirname, "./src"), }, }, CSS：{ 预处理器选项：{ scss: { 附加数据：` @import“@/app/styles/vars.scss”； @import“@/app/styles/mixins.scss”； ` } } }, })</pre> <p>这是<strong>tsconfig.json</strong>的内容</p>

{
  “编译器选项”：{
    “目标”：“ES2020”，
    “useDefineForClassFields”：true，
    “模块”：“ESNext”，
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    “skipLibCheck”：正确，

    /* 捆绑器模式 */
    "moduleResolution": "捆绑器",
    “allowImportingTsExtensions”：true，
    “resolveJsonModule”：正确，
    “isolatedModules”：正确，
    “noEmit”：正确，
    "jsx": "保留",

    /* 检测 */
    “严格”：真实，
    “noUnusedLocals”：正确，
    “noUnusedParameters”：true，
    “noFallthroughCasesInSwitch”：true，
    “路径”：{
      “@/*”：[
        “./src/*”
      ]
    }
  },
  "include": ["src/**/*.ts","src/**/*.d.ts", "src/**/*.tsx"],
  “引用”：[{“路径”：“./tsconfig.node.json”}]
}</pre>
<p><br />></p>

Answer 1

由于Vite的存在，您可以在导入文件时无需指定扩展名。但是，正如您提到的，如果两个文件在同一个文件夹下具有相同的名称，那么在导入任何一个文件时可能会遇到混淆的问题。 一个好的办法是为文件使用不同的名称，并使用相应的名称导入它们。

然而，如果有任何特定的要求需要使用相同的Vue和TS文件名称，那么一种方法是使用Vite的路径别名功能。您需要做的是-

在您的vite.config.ts文件中为这些文件定义路径别名-

resolve: {
  alias: {
    'IndexTs': 'index.ts文件的路径',
    'IndexVue': 'index.vue文件的路径
  }
},

在您的tsconfig.json中，修改compilerOptions部分以包含别名的路径映射-

{
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "@indexTs": ["index.ts文件的路径"],
      "@indexVue": ["index.vue文件的路径"]
    }
  }
}

现在，您可以像这样轻松导入这些文件-

import something from '@indexTs';
import IndexVueComponent from '@IndexVue'