<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
|
━───
アプリ
│
└───一部のコンポーネント
│index.ts
│ インデックス.vue
│ ...</pre>
<p>ただし、Webstorm はデフォルトで Index.vue ファイルを参照します。 </p>
<p>それでは、Webstorm にデフォルトで <strong>index.ts</strong> ファイルをインポートさせるにはどうすればよいでしょうか? </p>
<p><strong>追記</strong> ちなみに、アプリをビルドするとすべて問題なく動作しましたが、Webstorm とのリンクの問題のようです。</p>
<p>これは
vite.config.tsの内容です</p>
<pre class="brush:php;toolbar:false;">import {defineConfig} from 'vite'
「パス」からパスをインポートします
「@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>これは
tsconfig.jsonの内容です</p>
<pre class="brush:php;toolbar:false;">{
"コンパイラーオプション": {
"ターゲット": "ES2020",
"useDefineForClassFields": true、
"モジュール": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true、
/* バンドラーモード */
"moduleResolution": "バンドラー",
"allowImportingTsExtensions": true、
"resolveJsonModule": true、
"isolateModules": true、
"noEmit": true、
"jsx": "保存",
/* リンティング */
"厳密": true、
"noUnusedLocals": true、
"noUnusedParameters": true、
"noFallthroughCasesInSwitch": true、
「パス」: {
"@/*": [
「./src/*」
】
}
}、
"インクルード": ["src/**/*.ts"、"src/**/*.d.ts", "src/**/*.tsx"],
"参照": [{ "パス": "./tsconfig.node.json" }]
}</pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vite の存在により、拡張子を指定せずにファイルをインポートできます。ただし、前述したように、同じフォルダー内に 2 つのファイルが同じ名前を持つ場合、どちらかのファイルをインポートするときに混乱が発生する可能性があります。 ファイルに異なる名前を使用し、対応する名前でインポートすることをお勧めします。
ただし、同じ Vue および TS ファイル名を使用する必要がある特定の要件がある場合、1 つのアプローチは Vite のパス エイリアス機能 を使用することです。あなたがしなければならないことは-
です
リーリーvite.config.tsファイルでこれらのファイルのパス エイリアスを定義します -tsconfig.json
これで、次のようにこれらのファイルを簡単にインポートできるようになります -で、compilerOptionsセクションを変更して、エイリアス -のパス マッピングを含めます。 リーリーリーリー