Electron-vue2.0

结合vue脚手架环境搭建
安装

npm i @vue/cli -g

vue init simulatedgreg/electron-vue demo1

初始化

npm  install

运行

npm  run  dev

打包

npm run build

打包命名中文

package.json

  "build": {
    "productName": "安灯系统",
    "appId": "com.example.yourapp",
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:7001/"
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],

遇坑指南 运行报错


修改里面的代码注释掉

var options = {
  path: '/__webpack_hmr',
  timeout: 20 * 1000,
  overlay: true,
  reload: false,
  log: true,
  warn: true,
  name: '',
  autoConnect: false,//关闭
  overlayStyles: {},
  overlayWarnings: false,
  ansiColors: {},
};
//报错 先注释掉
// if (__resourceQuery) {
//   var overrides = Object.fromEntries(
//     new URLSearchParams(__resourceQuery.slice(1))
//   );
//   setOverrides(overrides);
// }

打包npm run build报错
electron-vue npm run build提示 Identifier ‘tasks’ has already been declared
找到 项目根目录 .electron-vue/build.js修改下面代码，修改其中一对的tasks变量名，需要注意的是本文件中一共包含四个tasks，前两个是一对，后两个是一对，修改时请对应修改

const tasks1 = ['main', 'renderer']
  const m = new Multispinner(tasks1, {
    preText: 'building',
    postText: 'process'
  })

electron-vue npm run build提示 ReferenceError: Multispinner is not defined
安装multispinner模块 在**.electron-vue\build.js** 引入multispinner 原因： .electron-vue\build.js文件中，代码中使用了 Multispinner ，但没有在开头引用，并且package.json文件中也没有这个依赖文件。
解决方法 先安装 Multispinner ，再在文件中引用

npm i multispinner --save

注意单词大小写

const Multispinner = require('multispinner')

如果打包失败 就多打包几次 可能是网络问题

使用node api报错解决 main/index.js

import { app, BrowserWindow,Menu } from 'electron'
import '../renderer/store'


if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

function createWindow () {
  Menu.setApplicationMenu(null)  //设置菜单栏为空
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    //设置窗口的图标
    icon:'../../build/icons/icon.ico',
    height: 600,
    useContentSize: true,  
    width: 1000,
    //fullscreen: true,//可以设置全屏
    webPreferences:{
      nodeIntegration:true,  //是否支持node  默认是false
      contextIsolation:false,  //需要加入这个才可以打印fs
      webSecurity:false, //开启跨域
    }
  })

 mainWindow.loadURL(winURL)
   
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

文件的读写删除 只能生成根目录文件 其他目录文件打包之后不生效还没找到解决方法

<template>
    <div >
        <h3>index页面</h3>
        <img id="logo" src="~@/assets/logo.png" style="height:40px"/>
        <el-button type="primary" @click="dataset" :loading="loading">同步数据</el-button>
        <el-button type="primary" @click="dataset1" >读取数据</el-button>
        <el-button type="primary" @click="dataset2" >删除文件</el-button>
        <el-button @click="logout">退出登录</el-button>
        <p>{{list}}</p>
       
    </div>
  </template>
 
  <script>
    const fs=require('fs')
   
    export default {
      name: 'index',
      data(){
        return {
            loading:false,
            list:''
        }
      },
      methods:{
        //同步
        dataset(){
            //this.loading=true
       
            let q=new Promise((resolve,reject)=>{
                    this.$axios.get('/daochushare').then(res=>{
                           console.log(res)
                            let json=JSON.stringify(res)
                            //写入文件
                            fs.writeFile('daochushare.json',json,(err)=>{
                                if(err) {
                                    console.log(err)
                                }else{
                                    console.log('写入OK')
                                }
                            })
                           
                    }).catch(err=>{
                       
                    })
            })  
        },
        dataset1(){
            let q=new Promise((resolve,reject)=>{
                    //读取文件   需要设置文字类型
                   
                    fs.readFile('daochushare.json','utf-8',(err,data)=>{
                        if(err){
                            console.error(err);
                        }
                        else{
                            console.log(JSON.parse(data));
                            this.list=JSON.parse(data)
                        }
                    });
            })  
        },
        dataset2(){
            let q=new Promise((resolve,reject)=>{
                   
                     //删除文件
                    fs.unlink('daochushare.json', function(err){
                        if(err){
                            console.log(err)
                        }
                        console.log('删除成功！');
                    })
            })
        },
        logout(){
          //退出登录
          this.$store.dispatch('logout');
            // 跳转回登录页
            setTimeout(() => {
                this.$router.push("/login")  
            }, 500);
           
        }
      }
    }
  </script>