<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
|
└───
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”:正确,
“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
文件中为这些文件定义路径别名-在您的
tsconfig.json
中,修改compilerOptions
部分以包含别名的路径映射-现在,您可以像这样轻松导入这些文件-