<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> 
由於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文件的路径"] } } }現在，您可以像這樣輕鬆導入這些文件-