Electron结合Vue使用说明

原创

可乐不可 2022-12-10 07:39:25 ©著作权

文章标签 vue.js electron javascript Vue html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者可乐不可的原创作品，请联系作者获取转载授权，否则将追究法律责任

Electron结合Vue使用说明

1. 创建Vue项目:

npm init vue

2. 创建Electron项目

npm init electron-app@latest electron-project – --template=webpack-typescript
npm install copy-webpack-plugin --save-dev

3. 项目配置

1.配置Vue项目：
1）配置base路径
// vite.config.ts export default defineConfig({ plugins: [vue(), vueJsx()], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, base: "./", // 新增配置(解决绝对路径导致HTML请求文件失败的问题) });
2）配置路由为哈希路由
// router/index.ts import { createRouter, createWebHashHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), // 修改为Hash模式 routes: [ { path: "/", name: "home", component: HomeView, }, { path: "/about", name: "about", component: () => import("../views/AboutView.vue"), }, ], }); export default router;
2.配置Electron项目
1）修改入口文件，将开发环境与Vue结合
// src/index.ts // 用于Vue开发环境 if(process.env.npm_lifecycle_event === 'start'){ mainWindow.loadURL(<前端项目地址，如('http://localhost:5174')>); } else { mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY); }
2）修改webpack配置，将Vue打包文件整合至Electron打包环境
// webpack.renderer.config.ts export const rendererConfig: Configuration = { module: {rules}, plugins: [ // 新增，在打包是将Vue项目整合至Electron new CopyPlugin({ patterns: [ { // 将dist目录文件(排除index.html)拷贝至.webpack/renderer/main_window from: "./dist/**", to: ({ context, absoluteFilename }) => { const relativePath = path .relative(context, absoluteFilename) .replace(/^dist/, "."); const basePath = path.resolve( __dirname, ".webpack/renderer/main_window" ); return path.resolve(basePath, relativePath); }, globOptions: { ignore: ["**/dist/index.html"], }, }, ], }), ...plugins, ], resolve: { extensions: [".js", ".ts", ".jsx", ".tsx", ".css"], }, };
3）修改forge入口
const config: ForgeConfig = { packagerConfig: {}, rebuildConfig: {}, makers: [ new MakerSquirrel({}), new MakerZIP({}, ["darwin"]), new MakerRpm({}), new MakerDeb({}), ], plugins: [ new WebpackPlugin({ mainConfig, renderer: { config: rendererConfig, entryPoints: [ { html: "./dist/index.html", // 将HTML文件入口指向Vue打包文件 js: "./src/renderer.ts", name: "main_window", preload: { js: "./src/preload.ts", }, }, ], }, }), ], };