vue-cli-electron 前后端分离项目

一、vue项目搭建

1. 安装vue脚手架

   # npm安装
   npm install -g @vue/cli
   # yanr安装
   yarn global add @vue/cli

2. 创建项目

   vue create projectName

二、配置electron

1. 进入项目目录后，运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器

   vue add electron-builder

   选择最新版本electron即可

2. 运行

   # npm
   npm run electron:serve
   # yarn
   yarn run electron:serve

三、搭建后端请求api

1. 在项目根目录创建api文件夹

2. 创建app.js

   const express=require('express')
   const app=express()
   
   app.get("/",(req,res)=>{
      res.json({
          msg:'success',
          code:0
      })
   })
   
   const server=app.listen(8081,()=>{
      console.log("http://127.0.0.1:"+server.address().port)
   })

四、运行

通过concurrently连接多条命令后运行

# npm
npm run devs
# yarn
yarn run devs

• 桌面端

• 浏览器

  

• api测试

五、解决Failed to fetch extension, trying 4 more times报错问题

注释掉src/background.js中以下代码

app.on('ready', async () => {
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // Install Vue Devtools
  //   try {
  //     await installExtension(VUEJS3_DEVTOOLS)
  //   } catch (e) {
  //     console.error('Vue Devtools failed to install:', e.toString())
  //   }
  // }
  createWindow()
})