我有一个用打字机写的应用程序。我创建了一个运行npm run build的构建。将生成一个文件夹dist，其中保存了不同的源：
我自动获得以下脚本index.html，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IAV Translate</title>
<base href="./">
<script type="module" crossorigin src="./assets/index-dbf8fcb6.js"></script>
<link rel="stylesheet" href="./assets/index-69a98e9f.css">
</head>
<body>
<div id="root"></div>
</body>
</html>我创建了一个电子应用程序，将TSX应用程序 Package 在其他文件夹中，如下所示（最终目的：获取exe文件）：
const { app, BrowserWindow } = require('electron');
const isDev = process.env.NODE_ENV === 'development';
// Inside file1.js
const path = require('path'); // If you're using Node.js
// const targetFilePath = path.join(__dirname, '../dist/index.html');
// const targetFileContent = require(targetFilePath);
// mainWindow.webContents.openDevTools();
function createWindow() {
// Create a new browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // Enable Node.js integration
// webSecurity: false, // Disable web security (not recommended for production)
// nodeIntegration: false, // Disable Node.js integration
contextIsolation: true, // Enable context isolation
sandbox: true, // Enable the Electron sandbox
contentSecurityPolicy: "default-src 'self'; script-src 'self' 'unsafe-inline';"
},
});
// Open the DevTools for debugging (add this line)
mainWindow.webContents.openDevTools();
// Build the path to your index.html relative to main.js
const indexPath = path.join(__dirname, '../dist/index.html');
// Load your React app's HTML file
// mainWindow.loadFile('../dist/index.html');
if (isDev) {
mainWindow.loadURL('http://localhost:3000').catch((error) => {
console.error('Error loading URL:', error);
});
} else {
mainWindow.loadFile(indexPath).catch((error) => {
console.error('Error loading file:', error);
});
}
}
// Create the main window when the app is ready
app.whenReady().then(() => {
createWindow()
})electron app的package.json如下：
{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"build": "electron-package ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^26.3.0"
}
}
当我运行npm start来打开应用程序时，应用程序打开了，但并没有找到所有的资源：
我尝试了多种解决方案，如添加：
<base href="./">或者直接调用体内的资源，但都没有用。从我的研究来看，这是一个与资源路径有关的问题。有什么想法吗？
更新我把vite.config.ts文件更新成这样
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgr()],
server: {
port: 3000
},
base: "./"
})再次运行npm run build。这消除了错误，但资源仍然无法加载。当打开开发工具时，这些资源根本不显示
1条答案
按热度按时间h9vpoimq1#
对于Vite + Electron，您必须将公共基础路径设置为
./或""（嵌入式部署的值），以便正确加载资产：请注意，这应该只在生产中需要，在开发中，你应该使用开发服务器。