Vue+Electron implements simple desktop application

This article mainly introduces the implementation of simple desktop applications with Vue Electron. It has certain reference value. Now I share it with you. Friends in need can refer to it.

I have been using C# to write desktop applications before, and also By the way, write some web applications. Recently, when I was looking at node, I found that the commonly used vscode is written in electron, and the idea of ​​​​trying to eat crabs came to me.

I searched for information about electron on the Internet, and also studied the official documents, and found that the electron app is actually a chrome browser, and the UI is all written using web-side technology, because it has been written using Vue before. Web application, so the combination of Vue Electron naturally comes to mind.

I searched online and found that there is a ready-made wheel Electron-Vue. I installed it immediately and used it. However, I found that it was not so satisfactory in the end. During the final build, errors always occurred. Later I finally found out that it was the network and build. Configuration problem. It gives people a headache.

So I finally decided to do it myself and combine the static web pages generated by Vue with Electron.

1.Vue uses the webpack project. After the build, a static web page will be generated in the dist folder. In this way, the generated web page can be accessed correctly when placed in the web container, but if the reference file path is opened directly locally, an error will occur. , and later found out that the reason was that the generated index.html and the resources were not in the same directory layer.

Modify config/index.js in the webpack project to

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

2. Use electron-quick-start to quickly build an electron project, and copy the files generated above to the root directory of the electron project Next, run the project and find that it runs normally.

3. However, the previous step is only to run in dev mode. Here, electron-builder is used to distribute the project. After installing electorn-builder globally, enter electron-builder --win --ia32 --dir The distribution of the project is completed.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

vue How to monitor whether the user has modified the information when switching pages after getting the page details

JS asynchronous Programming Promise, Generator, async/await

The above is the detailed content of Vue+Electron implements simple desktop application. For more information, please follow other related articles on the PHP Chinese website!