CODEWITHSUNDEEP
vue.jselectronvite
oyal
oyal

Reputation: 206

Vite + Vue3 + Electron. An error occurred in the static resource path after packaging

If the image src is dynamically spliced, there will be problems with the path pointing.

Simple example.

<script setup lang="ts">
import { ref } from "vue";

const filename = ref("vite.svg"); // The actual environment filename is read from the backend.
</script>

<template>
  <img :src="'/' + filename" class="logo" alt="Vite logo" />
  <img src="/vite.svg" class="logo" alt="Vite logo" />
</template>

First path: file:///G:/vite.svg

Second path: file:///G:/vite-electron/release/win-unpacked/resources/app.asar/dist/vite.svg

The same problem occurs with css files.

@font-face {
  font-family: HanYiQiHei;
  src: url('/fonts/HanYiQiHei.ttf');
}

This is an incorrect path.

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), electron({
    entry: 'electron/main.ts',
  })],
  build: {
    assetsInlineLimit: 0,
  },
})

Upvotes: 0

Views: 145

Answers (1)

Boris Maslennikov
Boris Maslennikov

Reputation: 360

I ususally have this alias in vite.config.js

import { fileURLToPath, URL } from 'node:url'

resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
}

then I can use it like this:

<img src="@/images/logo.png" />

or just try this:

<img src="./src/images/logo.png" />

Upvotes: 0

Related Questions