electron Vite汇总不解决别名只为电子文件

路径别名的另一个问题。它们在任何地方都能完美地工作，但对电子文件就不行了。
在vite.config.ts中，我有resolve: {alias: {"@": "/src"}}，项目结构的（部分）是：

D:/Project/src
  + electron/modules/A.ts
  + shared/B.ts
  + components/C.vue
  + services/D.ts
  + types/index.d.ts

现在C.vue和D.ts有了import whatever from "@/shared/B"，可以正常工作。相反，A.ts生成[vite]: Rollup failed to resolve import "@/shared/B" from "D:/Project/src/electron/modules/A.ts".错误。
奇怪的是，在A.ts中还有一个import type {aType} from "@/types"，它被解析而没有错误。
我尝试在别名定义中放置一个绝对路径，但没有任何变化。
我在Windows 11上使用vite 4.4.9。
谢谢你的帮助！马里奥

我的electron + vue 3 + typescript + vite项目也有这个问题
编辑：我找到了一个解决方案，你可以npm install --save-dev vite-plugin-electron和设置到你的vite.config.js像这样：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import electron from 'vite-plugin-electron';
import { notBundle } from 'vite-plugin-electron/plugin';
import * as path from 'path';
import pkg from './package.json';

const isDev = process.env.NODE_ENV === 'development';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron([
      {
        entry: 'src/electron/main.ts',
        onstart({ startup }) {
          startup();
        },
        vite: {
          build: {
            sourcemap: isDev,
            minify: !isDev,
            outDir: 'dist/src/electron',
            rollupOptions: {
              external: Object.keys(pkg?.dependencies ?? {}),
            },
          },
          plugins: [
            isDev && notBundle(),
          ],
          resolve: { // Resolve for main script
            alias: {
              '@': path.resolve(__dirname, './src'),
            },
          },
        },
      },
      {
        entry: 'src/electron/preload.ts',
        onstart({ reload }) {
          reload();
        },
        vite: {
          build: {
            sourcemap: isDev ? 'inline' : undefined,
            minify: !isDev,
            outDir: 'dist/src/electron',
            rollupOptions: {
              external: Object.keys(pkg?.dependencies ?? {}),
            },
          },
          plugins: [
            isDev && notBundle(),
          ],
          resolve: { // Resolve for preload script
            alias: {
              '@': path.resolve(__dirname, './src'),
            },
          },
        },
      }
    ]),
  ],
  base: './',
  resolve: { // Resolve for renderer part
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~js': path.resolve(__dirname, './src/core'),
      '~styles': path.resolve(__dirname, './src/styles'),
      '~fonts': path.resolve(__dirname, './src/assets/fonts'),
    },
  },
})

然后你可以像下面这样更新你的tsconfig.node.json，并在你的tsconfig.json中引用它：

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["vite.config.ts", "package.json", "src/electron"]
}

然后确保更新你的电子源代码路径，我的是在src/electron和输出dist是dist/src/electron
不要忘记更新你的package.json脚本，如下所示：

...
"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build && electron-builder",
  "preview": "vue-tsc --noEmit && vite build && electron ."
},
...

electron Vite汇总不解决别名只为电子文件

1条答案

相关问题

热门标签

最新问答