美文网首页
Vue+Electron环境搭建

Vue+Electron环境搭建

作者: SeanLink | 来源:发表于2023-06-25 18:16 被阅读0次

基础准备: Vue Electron Vite npm 等环境需要自行添加,有条件可以更改一下各自对应的源
项目搭建步骤

npm init vite
npm run dev
npm i electron -D
npm i nodemon -D

package.json中需要自行添加

 "scripts": {
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
  },

start之后如果报错:
App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module /xxxxx/Desktop/VUEAddElectron/readit/main.js from /Users/banma-3062/Desktop/VUEAddElectron/readit/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js not supported.
/Users/xxxx/Desktop/VUEAddElectron/readit/main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename /Users/xxxx/Desktop/VUEAddElectron/readit/main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/xxxx/Desktop/VUEAddElectron/readit/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
需要将package.json文件中type取值改为commonjs

在分析官方提示后发现应该在package.json文件中修改type为commonjs或将.eslintrc.js文件名改为.eslintrc.cjs便可解决该问题

原因分析:

type字段的产生用于定义package.json文件和该文件所在目录根目录中.js文件和无拓展名文件的处理方式。值为'moduel'则当作es模块处理;值为'commonjs'则被当作commonJs模块处理
目前node默认的是如果pacakage.json没有定义type字段,则按照commonJs规范处理
node官方建议包的开发者明确指定package.json中type字段的值
无论package.json中的type字段为何值,.mjs的文件都按照es模块来处理,.cjs的文件都按照commonJs模块来处理

相关文章

  • vue+electron搭建桌面应用

    一、创建项目 1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么? ...

  • React Native学习总结篇

    一、环境搭建 1.1 React Native环境搭建 1.1.1 IOS环境搭建 环境:MacOS 注意:不要使...

  • linux 第四天

    Lamp环境搭建 /*******************Lamp环境搭建:*******************...

  • codePush说明

    codePush环境搭建 环境搭建文章:环境搭建 git地址:codePush git地址2.0.3,And...

  • angular学习--02英雄指南

    环境搭建 angular官网--搭建本地开发环境和工作空间windows 10 搭建angular开发环境免搭建环...

  • Gradle开发-Groovy环境搭建

    ##Groovy环境搭建 在使用 Groovy 之前首先要搭建几个环境: Groovy 的环境搭建 JDK 环境搭...

  • 搭建 LNMP + CodeIgniter 开发环境

    搭建 LNMP + CodeIgniter 开发环境搭建 LNMP 环境首先搭建 LNMP 的服务器环境安装 Ng...

  • iOS中RN与Flutter混合开发

    一 搭建环境 1. 搭建flutter环境 1.1 搭建系统开发环境 参考链接:https://flutter....

  • 第一个MyBatis程序

    思路:搭建环境---导入MyBatis--编写代码---测试! 一、搭建环境 1、搭建数据库环境: engine=...

  • Robot Framework用法总结

    一,环境的搭建 关于robotframework环境搭建请参考博文:Robot Framework的环境搭建[ht...

网友评论

      本文标题:Vue+Electron环境搭建

      本文链接:https://www.haomeiwen.com/subject/ixaiydtx.html