標題重寫如下：遇到同一資料夾中存在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 } 從 '@/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”：true，
    「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'