Vue プロジェクトに Electron を追加するための詳細なコード

 "メイン": "electron.js",

 "パッケージ": "electron-packager ./ appName --overwrite"

 "電子共有メモリ": "^1.0.1",
   "node-gyp-build": "^4.3.0",
   "vue-photo-preview": "^1.1.3",

 "電子": "^15.3.1",
   "電子パッケージャー": "^15.4.0",

// open: true、(以前はコメントアウトされていませんでしたが、今はコメントアウトしています)

 '/api': {
        ターゲット: "electron-renderer"、(この場所のみが変更されました。以前はターゲット: 'http://localhost' でした)
        変更元: true、
        パス書き換え: {
          '^/api': ''
        }
      }

'vue-photo-preview' からプレビューをインポートします
'vue-photo-preview/dist/skin.css' をインポートします。
Vue.use(プレビュー)
// 電子エラーを解決する process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'TRUE'

// アプリケーションの寿命を制御し、ネイティブブラウザウィンドウを作成するモジュール
const {app, BrowserWindow} = require('electron')
定数パス = require('path')

関数createWindow(){
  // ブラウザウィンドウを作成します。
  const mainWindow = 新しいブラウザウィンドウ({
    幅: 1889,
    高さ: 1000,
    ウェブ設定: {
      プリロード: path.join(__dirname, 'preload.js')
    }
  })

  // アプリの index.html を読み込みます。
// mainWindow.loadFile('./dist/index.html')
  mainWindow.loadURL('http://172.16.1.155:7890/xjbd')

  // DevTools を開きます。
  mainWindow.webContents.openDevTools()
}

// このメソッドはElectronが終了したときに呼び出されます
// 初期化が完了し、ブラウザ ウィンドウを作成する準備が整いました。
// 一部の API はこのイベントが発生した後にのみ使用できます。
app.whenReady().then(() => {
  ウィンドウの作成()

  app.on('activate', 関数() {
    // macOSでは、アプリが終了してもウィンドウを再作成するのが一般的です。
    // ドックアイコンがクリックされ、他のウィンドウは開いていません。
    (BrowserWindow.getAllWindows().length === 0) の場合、createWindow()
  })
})

// macOS以外のすべてのウィンドウが閉じられたら終了します。macOSでは、これが一般的です
// アプリケーションとそのメニューバーは、ユーザーが終了するまでアクティブのままになります
// Cmd + Q で明示的に実行します。
app.on('ウィンドウがすべて閉じました', 関数() {
  (process.platform !== 'darwin') の場合、app.quit()
})

// このファイルには、アプリ固有のメインプロセスの残りを含めることができます
// コード。別々のファイルに入れて、ここで要求することもできます。

// すべての Node.js API はプリロード プロセスで使用できます。
// Chrome 拡張機能と同じサンドボックスを備えています。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (セレクター、テキスト) => {
    const 要素 = document.getElementById(セレクタ)
    if (要素) element.innerText = テキスト
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})