• How to use electron-builder in a Vue project


    1. Create project:

    vue create my-project
    

    2. Go into the project root

    cd my-project
    

    3. Install dependancies:

    npm install
    

    4. Run in browser to check:

    npm run serve
    

    5. Git commit this repository:

    git add .
    
    git commit -m "vue initiated"
    
    git remote add origin ****.git
    
    git push -u origin master
    

    6. Add electron-builder plugin:

    vue add electron-builder
    

    7. Choose the needed version of the electron-builder plugin.

    8. Check whether the plugin works well both in electron-exe type and in web browser:

    npm run electron:serve
    

    9. To use the methods and packs of Node.js, Create vue.config.js in the root folder of the project and add the code below:

    module.exports = {
        pluginOptions: {
            electronBuilder: {
                preload: 'src/preload.js',
                // Or, for multiple preload files:
                // preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
                preload: { preload: 'src/preload.js' }
            }
        }
    }
    

    10. As is mentioned in the code shown above, create preload.js file in the projects' src folder to use the methods and functions and properties of Node.js in it, for example:

    // preload.js 中使用nodejs
    const { readFileSync, write } = require('fs');
    const { readFile } = require('fs');
    const { writeFile } = require('fs');
    
    window.readConfig = function(filePath) {
        console.log("File has been successfully read!");
        const data = readFileSync(filePath);
        return data;
    }
    
    
    window.writeFileConfig = function(_path, anythingUWanaWrite) {
            writeFile(_path, anythingUWanaWrite, function() {
                console.log("File written done!");
            });
        }
    	//Below is the reference of the code above
        // fs.writeFile(_path, "electron + Javascript", function (err) {
        //     if (!err)
        //         console.log("写入成功!");
        // });
    
    // index.html 或其他vue脚本后加载的内容可以使用window.readConfig()方法,但不能使用Node.js特性
    // console.log(window.readConfig()) // 正常执行
    // console.log(readFileSync('./config.json')) // 报错
    

    11. You can use window.writeFileConfig(yourLocalPath,"Somthing you want to write") in any *.vue file ot *.html file rather than using directly the original native methods of Node.js, for example:

    <template>
        <div class="hello">
            <h1>{{ msg }}</h1>
            <input type="file" id="read-file" name="fileContent" @click="ReadLocalFile()" />
            <input type="text" id="file-path" name="filePath" />
            <button id="should-read-as-text" @click="changeReadType()">{{readTypeMsg}}</button>
            <button id="read-file-in-nodejs" @click="ReadLocalFileInNodeJS()">Read Local File</button>
            <button id="write-file-in-nodejs" @click="WriteLocalFileInNodeJS()">Write Local File</button>
        </div>
    </template>
    
    <script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                readTypeMsg: "Read As Text",
                shouldReadAsText: false
            }
        },
        created() {
            this.initialize();
        },
        methods: {
            initialize() {
                this.shouldReadAsText = false;
            },
            changeReadType() {
                this.shouldReadAsText = !this.shouldReadAsText;
                console.log(this.shouldReadAsText);
                this.shouldReadAsText && (this.readTypeMsg = 'Read As Data')
                    || ((this.readTypeMsg = 'Read As Text'));
            },
            ReadLocalFile() {
                var fileInput = document.querySelector('#read-file');
                var that = this;
                fileInput.onchange = function () {
                    console.log('文件名:', this.value)
                    var filereader = new FileReader();
                    var fileType = this.files[0].type;
                    console.log(that.shouldReadAsText);
                    if (that.shouldReadAsText === true) {
                        filereader.readAsText(this.files[0], 'gbk');
                    }
                    else {
                        filereader.readAsDataURL(this.files[0]);
                    }
                    filereader.onload = function () {
                        if (/^image[jpeg|png|gif]/.test(fileType)) {
                            console.log("Read image content: " + this.result);
                        }
                        console.log("Content read: " + this.result);
                    }
                }
            },
            ReadLocalFileInNodeJS() {
                // let filePath = document.querySelector('#file-path').value;
                console.log(window.readConfig('D:/myText.txt'));
                try {
                    // console.log(window.readConfig(filePath));
                } catch (err) {
                    console.log(err);
                    console.error('error occurred while getting the file path from input.');
                }
            },
            WriteLocalFileInNodeJS() {
                let filePath = document.querySelector('#file-path').value;
                try {
                    window.writeFileConfig(filePath, 'Something you want to write in the file.');
                } catch (err) {
                    console.log(err);
                    console.error('error occurred while getting the file path from input.');
                }
            }
        }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
    </style>
    
    

    12. create background.js file in src folder and add the code below:

    'use strict'
    import path from 'path'
    import { app, protocol, BrowserWindow } from 'electron'
    import {
        createProtocol,
        /* installVueDevtools */
    } from 'vue-cli-plugin-electron-builder/lib'
    const isDevelopment = process.env.NODE_ENV !== 'production'
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let win
    
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
    
    function createWindow() {
        // Create the browser window.
        win = new BrowserWindow({
             800,
            height: 600,
            webPreferences: {
                // Use pluginOptions.nodeIntegration, leave this alone
                // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
                nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
                preload: path.join(__dirname, 'preload.js')
            }
        })
    
        if (process.env.WEBPACK_DEV_SERVER_URL) {
            // Load the url of the dev server if in development mode
            win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
            if (!process.env.IS_TEST) win.webContents.openDevTools()
        } else {
            createProtocol('app')
                // Load the index.html when not in development
            win.loadURL('app://./index.html')
        }
    
        win.on('closed', () => {
            win = null
        })
    }
    
    // Quit when all windows are closed.
    app.on('window-all-closed', () => {
        // On macOS it is common for applications and their menu bar
        // to stay active until the user quits explicitly with Cmd + Q
        if (process.platform !== 'darwin') {
            app.quit()
        }
    })
    
    app.on('activate', () => {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (win === null) {
            createWindow()
        }
    })
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', async() => {
        if (isDevelopment && !process.env.IS_TEST) {
            // Install Vue Devtools
            // Devtools extensions are broken in Electron 6.0.0 and greater
            // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
            // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
            // If you are not using Windows 10 dark mode, you may uncomment these lines
            // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
            // try {
            //   await installVueDevtools()
            // } catch (e) {
            //   console.error('Vue Devtools failed to install:', e.toString())
            // }
    
        }
        createWindow()
    })
    
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
        if (process.platform === 'win32') {
            process.on('message', data => {
                if (data === 'graceful-exit') {
                    app.quit()
                }
            })
        } else {
            process.on('SIGTERM', () => {
                app.quit()
            })
        }
    }
    

    12. Move the preload.js file into the dist_electron folder if running npm run electron:serve fails or no proload-js file created along with package-json file and an index-js file in a compatible mode.

    13. Run again and it will be OK.


    Author: Alexander Ezharjan

  • 相关阅读:
    发布AI芯片昆仑和百度大脑3.0、L4自动驾驶巴士量产下线,这是百度All in AI一年后的最新答卷...
    Redis 使用多个数据库及密码配置
    Redis 使用多个数据库及密码配置
    Redis 使用多个数据库及密码配置
    [Winform]DataGridView列自适应宽度
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    运筹学那些事,专科学生学习运筹学之图论方法,No.7
    SpringMVC的HttpMessageConverter
    @ResponseStatus的作用
  • 原文地址:https://www.cnblogs.com/ezhar/p/13170169.html
Copyright © 2020-2023  润新知