前端 - 已经配置了tsconfig.json的alias路径，但是渲染进程使用时候为何还是报错？

Question

在electron 的demo中：
有如下的tsconfig.json的配置，目的是为了在renderer中可以引入使用src/shared/的文件：

tsconfig.json：

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@main/*": ["src/main/*"],
        "@renderer/*": ["src/renderer/*"],
        "@shared/*": ["src/shared/*"]
      },

tsconfig.web.json

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.tsx",
    "src/shared/**/*",
    "src/shared/**/*.ts",
    "src/preload/*.d.ts"
  ],
  "compilerOptions": {
    "composite": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@renderer/*": [
        "src/renderer/src/*"
      ],
      "@shared/*": ["src/shared/*"]
    }
  }
}

但是在renderer引入使用时候，还是报错：
src/renderer/src/App.tsx

17 |  import { ConfigEntities } from "@shared/db-entities/Config";
   |                                  ^

===

编辑：1

现有 electron-vite.config.ts 配置如下：

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import path, { resolve } from 'path'

export default defineConfig({
  main: {
    resolve: {
      alias: {
        '@main': path.resolve(__dirname, 'src/main')
      }
    },
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    resolve: {
      alias: {
        '@preload': path.resolve(__dirname, 'src/preload')
      }
    },
    plugins: [externalizeDepsPlugin()]
  },
  shared: {
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, 'src/shared')
      }
    },
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': path.resolve(__dirname, 'src/main'),
      }
    },
    plugins: [react()]
  }
})

但是还是会报错：

Answer 1

vite config 也需要同步修改

https://cn.vitejs.dev/config/shared-options.html#resolve-alias

---

tsconfig 中的 alias 用于在编辑器编辑时以及 ts 编译时解析路径

vite config 中的 alias 用于 vite 构建时解析路径