Vite 프로젝트 React TS에서 절대 경로가 작동하지 않습니다.

Vite 프로젝트 React TS에서 절대 경로가 작동하지 않습니다.

저는 Vite 리액트 프로젝트에서 일할 수 있는 절대적인 길을 찾기 위해 노력하고 있습니다.

프로젝트 작성 방법은 다음과 같습니다.

npm init @vitejs/app
npx: installed 6 in 1.883s
√ Project name: ... test-vite
√ Select a framework: » react
√ Select a variant: » react-ts

다음으로 TS 공식 문서에 따라 tsconfig.json에 baseUrl을 추가했습니다.

{
  "compilerOptions": {
    "baseUrl": "./src",
    ...

다음으로 단순한 컴포넌트(T:\test-vite\src\components)를 추가합니다.\Test.tsx)

import React from "react";

const Test = () => <h1>This is a Test.</h1>;

export default Test;

마지막으로 App.tsx에서 테스트 컴포넌트를 Import합니다.
절대 경로를 사용할 수 없습니다.

import Test from "components/Test";

이 에러가 표시된다.

반면 상대 경로를 사용하면 앱은 개발 및 빌드 모드로 오류 없이 작동합니다.

import Test from "./components/Test";

프로젝트에서 절대 경로를 작동하려면 어떻게 해야 합니까?

여기에는 다음 두 가지 문제가 있습니다.

• 가져오기 경로 해결 방법 설명
• Import 경로 구축 방법 설명

타이프스크립트에서는 해결 방법만 알려주고 빌드 방법은 모릅니다.따라서 공식 문서 resolve.alias를 참조하십시오.필요한 것은 다음과 같습니다.

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

다음과 같은 경로(또는 아래의 모듈)를 Import할 수 있습니다../src):

import Test from "@/components/Test";
import bar from "@/foo/bar"

또한 vite 플러그인을 직접 사용할 수 있으므로 수동으로 구성할 필요가 없습니다.resolve.alias

다음의 순서에 따릅니다.

1. 설치하다vite-tsconfig-paths개발의존관계로서

2. 주입vite-tsconfig-pathsvite.config.ts 모듈 사용

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

저는 검색 결과를 통해 이곳에 왔습니다. 저는 다른 무언가를 찾고 있었습니다. 즉, 단순 절대 Import를 어떻게 할 것인가 하는 것입니다.import { foo } from 'src/lib/foo.ts'

따라서 모든 코드가 포함된 /src 디렉토리가 있으며 절대 Import 경로를 사용하려는 경우.

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: path.resolve('src/'),
    },
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  }
}

이것은 속임수입니다.src는 에일리어스이기 때문에 Vite에서는 경로가 절대적인 것처럼 보입니다.루트 dir에 /src 옆에 다른 디렉토리가 있는 경우 해당 디렉토리의 다른 에일리어스를 추가해야 합니다.

@Yuns 솔루션은 작동하지만 vscoode에 오류가 표시됩니다.vs 코드로 자동 Import를 해제하는 것이었습니다.

vscode와 vite 모두에서 동작하도록 하기 위해 tsconfig와 vite.config 모두에 에일리어스를 추가했습니다.

// tsconfig.json
{
  "paths": {
      "@/*": ["src/*"]
    }
  // ...
}


// vite.config.ts
{
  resolve: {
   alias: [{ find: '@', replacement: '/src' }],
  },
  // ...
}

그러면 아래와 같이 Import할 수 있습니다(svelte 앱이 있습니다).src디렉토리)

import Header from '@/components/Header.svelte

찾고 있다import {...} from "src/foo/bar";?

저도 Maciej Krawczyk 같은 검색 결과를 통해서 왔는데@역시 내가 관심있는 부분은 아니었다.그 사용자의 답변이 도움이 되었지만, 저는 이 질문에 대해 어려움을 겪었습니다.path.resolvepart (Reference Error가 원인)path정의되어 있지 않습니다).그래서 저는 조금 다른 접근방식을 사용했습니다.

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: "/src",
    },
  },
  ...
})

를 Vite로 합니다./src서버로부터 송신됩니다(GH 문제 참조).따라서 프로젝트의 근원부터 실행/구축하는 경우src를를 iteite iteite iteite iteite iteite iteite ite iteite ite iteite iteite iteiteite

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "src/*": [
        "./src/*"
      ]
    }
  }
}

이는 기본적으로 이 StackOverflow 응답을 맹목적으로 따르는 것입니다.TypeScript는 델도 특별한 해결 방법을 가지고 있다는 것을 알아야 합니다.그렇지 않으면 TS는 존재하지 않는 고객의 존재를 두려워하게 됩니다.src: 설정을 한 후 즉시 에 아직 .(참고: TS 구성을 변경한 후에도 VSCode가 즉시 변경 사항을 인식하지 못했기 때문에 여전히 경고가 표시됩니다.종료하고 다시 열어 경고가 사라질 때까지 15초 정도 기다려야 했습니다.)

멋진 것을 하세요.import "@/something-in-src"Vue는 Vite + React + TypeScript를 사용합니다.

개발 종속성으로 설치되었는지 확인하십시오.이 제품은 Vite의 최신 버전과 함께 제공되지 않았습니다."path" ★★★★★★★★★★★★★★★★★」__dirname이치노

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
  plugins: [react()],
});

tsconfig.json

추가:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

1) 다음의 패키지를 인스톨 할 필요가 있습니다.

npm i path
yarn add path

npm i @types/node
yarn add @types/node

npm i vite-tsconfig-paths
yarn add vite-tsconfig-paths

2) 다음으로 vite.config 파일에서 다음을 수행합니다.

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

    export default defineConfig({
      base: './',
      resolve: {
        alias: {
          Components: path.resolve(__dirname, './src/components'),
          Assets: path.resolve(__dirname, './src/assets'),
        },
      },
      plugins: [react(), tsconfigPaths()],
    });

3) 이제 에일리어스에서 정의한 것과 같은 경로를 TS에 알려야 합니다.

    {
      "compilerOptions": {
        ...,
        "baseUrl": "./",
        "paths": {
          "src/*": [ "./src/*" ],
          // We define this path for all files/folders inside 
          // components folder:
          "Components/*": [ "./src/components/*" ],
          // We define this path for the index.ts file inside the 
          // components folder:
          "Components": [ "./src/components" ],
          "Assets/*": [ "./src/assets/*" ],
          "Assets": [ "./src/assets" ]
        }
      },
      ...
    }

4) vscode 새로고침:위의 설명과 같이 Fn1을 누르고 "내선번호가 비활성화되어 있는 새로고침"을 입력하여 팝업에서 확장을 다시 활성화합니다.

---

Import를 시도합니다.

import Test from "components/Test";

그건 작동할 거야.

모든 필수 변경 후에도 문제가 발생하는 사용자는 vscode를 다시 로드해야 합니다.구성 파일:

tsconfig.json

"baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: { '@': path.resolve(__dirname, './src') },
    },
    plugins: [react()],
});

위의 코드에서는 2개의 라이브러리를 설치해야 합니다.

• 'path': npm i 경로
• '@types/node': npm i @types/node

프로젝트 파일을 구성한 후에는 vscode를 다시 로드해야 합니다.이를 수행하려면 ctrl + P를 누르고 "> extensions disabled"를 입력합니다.그 후 pop Up이 뜨면 extensions를 다시 활성화하면 absoulte 경로가 작동합니다.

vite-tsconfig-paths 라이브러리를 설치한 경우 vscode도 새로고침해야 합니다.지정된 라이브러리를 vite.config.ts로 Import해야 합니다.

export default defineConfig({ plugins: [react(), tsconfigPaths()] });

패키지의 경우 '@components/File' 가져오기 대신 기본 'components/File' 가져오기를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/68241263/absolute-path-not-working-in-vite-project-react-ts