vue3+vite搭建脚手架项目本地运行electron桌面应用

1.搭建脚手架项目

搭建Vue3+Vite+Ts脚手架-CSDN博客

2.创建完项目后,安装所需依赖包

npm i vite-plugin-electron electron@26.1.0

3.根目录下创建electron/main.ts

electron/main.ts

/** electron/main.ts */

import { app, BrowserWindow } from "electron";

const createWindow = () => {
  const win = new BrowserWindow({
    width: 960,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 设置是否在页面中启用 Node.js 集成模式
      contextIsolation: false, // 设置是否启用上下文隔离模式。
    },
  });

  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL); // 使用vite开发服务的url路径访问应用
  } else {
  }
};

app.whenReady().then(createWindow);

4.配置vite.config.ts

import electron from "vite-plugin-electron";

electron([{ entry: "electron/main.ts" }])

5.配置package.json

删除:"type": "module",

添加:"main": "dist-electron/main.js",

6.运行项目 npm run dev 自动弹出窗口

7.解决问题

警告问题:The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

解决方案

将 vite.config.ts 文件改名为 vite.config.mts

文件扩展名 .mts 明确地指示 Node.js 将该文件作为一个 ECMAScript Module (ESM) 来处理。

这与在 package.json 中设置 "type": "module" 相类似,都是为了确保 Node.js 以 ESM 格式解析和执行模块。

相关推荐
还是大剑师兰特32 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解33 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~39 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding44 分钟前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css