ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。