標題重寫如下:遇到同一資料夾中存在index.vue檔案時,在Vue 3和Vite中使用無檔案副檔名匯入index.ts檔案時會產生錯誤連結
P粉194919082
P粉194919082 2023-08-14 12:39:38
0
1
505
<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>            
P粉194919082
P粉194919082

全部回覆(1)
P粉022140576

由於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'
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!