标题重写如下：遇到同一文件夹中存在index.vue文件时，在Vue 3和Vite中使用无文件扩展名导入index.ts文件时会产生错误链接-PHP中文网问答

如何在同一个文件夹中有另一个index.vue文件的情况下，使用vue 3和vite导入index.ts文件而不指定文件扩展名？

我正在尝试导入组件：

import { Component } from '@/app/some_component'

src
|
└───
    app
    │   
    └───some_component
         │   index.ts
         │   index.vue
         │   ...

但是Webstorm默认引用index.vue文件。

所以，如何让Webstorm默认导入index.ts文件？

P.S. 顺便说一下，当我构建应用程序时一切正常，这似乎是Webstorm的链接问题。

这是vite.config.ts的内容

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [vue(), tsconfigPaths()],
  server: {
    host: true,
    port: 5000,
  },
  preview: {
    port: 8000
  },
  resolve: {
    alias:
      {
        '@': path.resolve(__dirname, "./src"),
      },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @import "@/app/styles/vars.scss";
        @import "@/app/styles/mixins.scss";
        `
      }
    }
  },
})

这是tsconfig.json的内容

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

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

全部回复(1)

P粉0221405762023-08-15 10:25:04 1楼

由于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'

赞 +0

添加回复