Tajuk ditulis semula seperti berikut: Mengimport fail index.ts tanpa sambungan fail dalam Vue 3 dan Vite menghasilkan pautan ralat apabila fail index.vue ditemui dalam folder yang sama.

Question

Bagaimana untuk mengimport fail index.ts menggunakan vue 3 dan vite tanpa menyatakan sambungan fail apabila terdapat fail index.vue lain dalam folder yang sama?

Saya cuba mengimport komponen:

import { Komponen } daripada '@/app/some_component'

src
|
└───
    aplikasi
    │
    └───beberapa_komponen
         │ indeks.ts
         │ index.vue
         │ ...</pra>
<p>Tetapi Webstorm merujuk fail index.vue secara lalai. </p>
<p>Jadi, bagaimana untuk membuat Webstorm mengimport fail <strong>index.ts</strong> </p>
<p><strong>P.S.</strong> By the way, semuanya berfungsi dengan baik apabila saya membina apl, ia nampaknya menjadi isu pemautan dengan Webstorm.</p>
<p>这是<strong>vite.config.ts</strong>的内容</p>
<pre class="brush:php;toolbar:false;">import { defineConfig } daripada 'vite'
import laluan daripada 'path'
import vue daripada '@vitejs/plugin-vue'
import tsconfigPaths dari 'vite-tsconfig-paths'

eksport defineConfig lalai ({
  pemalam: [vue(), tsconfigPaths()],
  pelayan: {
    tuan rumah: benar,
    pelabuhan: 5000,
  },
  pratonton: {
    pelabuhan: 8000
  },
  selesaikan: {
    alias:
      {
        '@': path.resolve(__dirname, "./src"),
      },
  },
  css: {
    prapemprosesPilihan: {
      scss: {
        data tambahan: `
        @import "@/app/styles/vars.scss";
        @import "@/app/styles/mixins.scss";
        `
      }
    }
  },
})

这是tsconfig.json的内容

{
  "compilerOptions": {
    "sasaran": "ES2020",
    "useDefineForClassFields": benar,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": benar,

    /* Mod pengikat */
    "moduleResolution": "pengikat",
    "allowImportingTsExtensions": benar,
    "resolveJsonModule": benar,
    "Modul terpencil": benar,
    "noEmit": benar,
    "jsx": "pelihara",

    /* Linting */
    "ketat": benar,
    "noUnusedLocals": benar,
    "noUnusedParameters": benar,
    "noFallthroughCasesInSwitch": benar,
    "laluan": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "rujukan": [{ "path": "./tsconfig.node.json" }]
}

Answer 1

Terima kasih kepada Vite, anda boleh mengimport fail tanpa menyatakan sambungan. Walau bagaimanapun, seperti yang anda nyatakan, jika dua fail mempunyai nama yang sama di bawah folder yang sama, anda mungkin menghadapi kekeliruan semasa mengimport mana-mana fail. Idea yang baik ialah menggunakan nama yang berbeza untuk fail dan mengimportnya dengan nama yang sepadan.

Walau bagaimanapun, jika terdapat sebarang keperluan khusus yang memerlukan penggunaan nama fail Vue dan TS yang sama, maka salah satu caranya ialah menggunakan ciri alias laluan Vite. Apa yang anda perlu lakukan ialah-

Tentukan alias laluan untuk fail ini dalam vite.config.tsfail-

anda

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

Peta dalam bahagian tsconfig.json中，修改compilerOptions anda dengan laluan yang mengandungi alias -

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

Kini anda boleh mengimport fail ini dengan mudah seperti ini -

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