Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【二】

最新推荐文章于 2024-05-12 09:56:17 发布

liulun

最新推荐文章于 2024-05-12 09:56:17 发布

阅读量5.8k

点赞数 8

分类专栏： Electron 文章标签： Electron vue vite

本文链接：https://blog.csdn.net/liulun/article/details/110954290

版权

楔子

上一篇文章（https://blog.csdn.net/liulun/article/details/110953968）中，

我们讲了Electron+Vite的开发环境，并成功的加载了本地Vue3项目的页面

这一节我们讲如何编译打包项目

使用electron-builder打包electron应用，

需要经过如下几步：

1：把静态资源html,css,js,img等编译好，放到指定的目录

2：把主进程代码编译好，放到指定目录

3：制作一个package.json指定入口文件为主进程文件，并放置到指定目录

4：调用electron-builder内置的API完成打包工作

编译渲染进程资源

首先要通过编码的方式，调用Vite的API来编译Vue项目，代码如下：

async buildRender () {
    let options = {
      root: process.cwd(),
      enableEsbuild: true,
      minify: false,
      outDir: path.join(process.cwd(), "release/bundled"),
      alias: {
        "/@/": path.resolve(__dirname, "./src"),
      },
      optimizeDeps: {
        exclude: ['process']
      }
    };
    await vite.build(options);
    let htmlPath = path.join(this.bundledDir, "index.html")
    let html = fs.readFileSync(htmlPath, { encoding: "utf8" })
    html = html.replace("<head>", `<head><script>${this.getEnvScript()};</script>`)
    fs.writeFileSync(htmlPath,

最低0.47元/天解锁文章

liulun

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
8
评论
Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【二】

楔子上一篇文章（https://blog.csdn.net/liulun/article/details/110953968）中，我们讲了Electron+Vite的开发环境，并成功的加载了本地Vue3项目的页面这一节我们讲如何编译打包项目使用electron-builder打包electron应用，需要经过如下几步：1：把静态资源html,css,js,img等编译好，放到指定的目录2：把主进程代码编译好，放到指定目录3：制作一个package.json指定入口文件为主进程
复制链接

扫一扫