标题重写如下:遇到同一文件夹中存在index.vue文件时,在Vue 3和Vite中使用无文件扩展名导入index.ts文件时会产生错误链接
P粉194919082
P粉194919082 2023-08-14 12:39:38
0
1
726
<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>            
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'
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板