electron forge 初始化 vite ts vue3 项目模版

blanks20202026-03-27 11:20

直接使用官方文档，肯定会掉进坑里，浪费不少时间。

切勿升级 package.json 里面的依赖，否则可能会掉进 vite 和 vue.runtime 的坑里，除非你下定决心彻底解决所有问题。

默认使用的 npm 装的依赖。

arduino 复制代码

# https://www.electronforge.io/templates/vite-+-typescript
npx create-electron-app@latest my-new-app --template=vite-typescript

# https://www.electronforge.io/guides/framework-integration/vue-3
npm install vue
npm install --save-dev @vitejs/plugin-vue

2 重命名 vite.renderer.config.ts 为 vite.renderer.config.mts

修改 forge.config.ts 中的 renderer 配置： vite.renderer.config.ts 为 vite.renderer.config.mts

javascript 复制代码

// vite.renderer.config.mts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config
export default defineConfig({
  plugins: [vue()]
});

3 改动一下文件

html 复制代码

// index.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello World!</title>
	</head>
	<body>
		<div id="app"></div>
		<script
			type="module"
			src="/src/renderer.ts"
		></script>
	</body>
</html>

创建 src/vue/App.vue

xml 复制代码

<template>
	<h1>💖 Hello World!</h1>
	<p>Welcome to your Electron application.</p>
</template>

<script setup>
console.log('👋 This message is being logged by "App.vue", included via Vite')
</script>

修改 src/renderer.ts

javascript 复制代码

import { createApp } from 'vue';
import './index.css';
import App from './vue/App.vue';

console.log(
  '👋 This message is being logged by "renderer.ts", included via Vite',
);

createApp(App).mount('#app');

启动项目和打包应该都是能正常运行的

arduino 复制代码

npm run start
npm run package