【Electron】Vite+Ts 项目内配置路径别名 “@/“

如果你在Vite项目内使用绝对路径 "@/" 出现这样报错

[plugin:vite:import-analysis] Failed to resolve import "@/components/HelloWorld.vue" from "src\App.vue". Does the file exist?
C:/Users/ttatt/Desktop/te/getLive/gitee/webElectron/src/App.vue:2:23
1  |  import { defineComponent as _defineComponent } from "vue";
2  |  import HelloWorld from "@/components/HelloWorld.vue";
   |                          ^
3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
4  |    __name: "App",

在 Vite 项目中，路径别名的配置是通过 vite.config.js 文件中的 resolve.alias 字段来完成的。确保项目中有这样的配置，以便正确使用 @/ 路径别名。

1.在 tsconfig.json 中配置路径别名：

// tsconfig.json

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

2.在 vite.config.js 中配置别名：

import { defineConfig } from 'vite'
import path from 'node:path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // 其他配置...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})