제목은 다음과 같이 다시 작성됩니다. Vue 3 및 Vite에서 파일 확장자가 없는 index.ts 파일을 가져오면 동일한 폴더에서 index.vue 파일이 발견될 때 오류 링크가 생성됩니다.
<p>같은 폴더에 다른 index.vue 파일이 있는 경우 파일 확장자를 지정하지 않고 vue 3 및 vite를 사용하여 index.ts 파일을 가져오는 방법은 무엇입니까? </p>
<p>구성요소를 가져오려고 합니다: </p>
<pre class="brush:php;toolbar:false;">'@/app/some_comComponent'에서 { 구성요소 } 가져오기</pre>
<pre class="brush:php;toolbar:false;">src
|
└───
앱
│
└───어떤_컴포넌트
│ index.ts
│ index.vue
│ ...</pre>
<p>그러나 Webstorm은 기본적으로 index.vue 파일을 참조합니다. </p>
<p>그렇다면 Webstorm이 기본적으로 <strong>index.ts</strong> 파일을 가져오도록 하려면 어떻게 해야 할까요? </p>
<p><strong>추신</strong> 그런데 앱을 빌드해 보니 모든 것이 잘 작동하는데 Webstorm과의 연결 문제인 것 같습니다.</p>
<p>这是<strong>vite.config.ts</strong>적용
<pre class="brush:php;toolbar:false;">'vite'에서 { 정의 구성 } 가져오기
'경로'에서 경로 가져오기
'@vitejs/plugin-vue'에서 vue 가져오기
'vite-tsconfig-paths'에서 tsconfigPaths 가져오기
기본 정의 구성 내보내기({
플러그인: [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>
<pre class="brush:php;toolbar:false;">{
"컴파일러 옵션": {
"대상": "ES2020",
"useDefineForClassFields": 사실,
"모듈": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": 사실,
/* 번들러 모드 */
"moduleResolution": "번들러",
"allowImportingTsExtensions": 사실,
"resolveJsonModule": 사실,
"isolationModules": 사실,
"noEmit": 사실,
"jsx": "보존",
/* 린팅 */
"엄격한": 사실,
"noUnusedLocals": 사실,
"noUnusedParameters": 사실,
"noFallthroughCasesInSwitch": 사실,
"경로": {
"@/*": [
"./src/*"
]
}
},
"포함": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
"참조": [{ "경로": "./tsconfig.node.json" }]
}</pre>
<p><br /></p>
