Vue+Electron はシンプルなデスクトップ アプリケーションを実装します

この記事では、主に Vue+Electron を使用した簡単なデスクトップ アプリケーションの実装を紹介します。これは、必要な友人に共有して参考にすることができます。いくつかの Web ターミナルも作成します。最近、nodeを見ていたら、よく使われるvscodeがelectronで書かれていることを知り、カニを食べてみようと思いつきました。

インターネットで Electron に関する情報を検索し、公式ドキュメントも調べたところ、Electron アプリは実際には Chrome ブラウザーであり、UI はすべて Web 側の技術を使用して記述されていることがわかりました。以前は Web アプリケーションを使用していたので、当然、Vue+Electron の組み合わせが思い浮かびます。

ネットで検索して、Electron-Vue という既製のホイールを見つけて、すぐにインストールして使用しましたが、最終的にはエラーが発生することがわかりました。最終的に、ネットワークとビルド構成に問題があることがわかりました。それは人々に頭痛を与えます。

そこで私は最終的に自分でやって、Vue で生成された静的 Web ページを Electron と組み合わせることにしました。

1.Vue は webpack プロジェクトを使用します。このように、ビルド後、静的 Web ページが Web コンテナーに配置されると正しくアクセスできます。ファイルパスをローカルで直接開くと、生成されたindex.htmlとリソースが同じディレクトリ層にないため、エラーが発生することが後でわかりました。

webpack プロジェクトの config/index.js を

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

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

2 に変更します。electron-quick-start を使用して Electron プロジェクトをすばやく構築し、上記で生成されたファイルを Electron プロジェクトのルート ディレクトリにコピーし、プロジェクトを実行します。正常に動作することがわかります。

3. ただし、前のステップは開発モードで実行するだけです。electorn-builder をグローバルにインストールした後、electron-builder --win --ia32 --dir と入力します。プロジェクトの配布を完了します。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vue ページの詳細を取得した後、ページを切り替えるときにユーザーが情報を変更したかどうかを監視する方法

JS 非同期プログラミング Promise、Generator、async/await

以上がVue+Electron はシンプルなデスクトップ アプリケーションを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。