当前位置：首页 > news >正文

Electron结合Vue使用说明

news 来源：原创 2024/4/26 22:28:18

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",
           },
         },
       ],
     },
   }),
 ],
};