electron和vue结合，配置win.loadURL()之后直接接上服务器的网页了，不是本地的项目。

Question

我的vue.config.js只配置了这些，运行接口是管使的，打包之后就直接上到服务器地址了。

  // 第三方插件配置
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "src/assets/less/global.less")],
      // injector: 'append' // 'prepend' 或者 'append'  表示资源导入的位置，在之前还是之后
    },
    electronBuilder: { // electron配置
      builderOptions: {
            win:{ // 先新增个 win
          target: 'nsis', // 使用这种打包方式
        },
        nsis:{
          oneClick: false, // 一键安装置为 false , 避免刚才的一件安装
          allowToChangeInstallationDirectory: true, // 自定义安装置为 false , 避免刚才的一件安装
        },
        publish: [
          {
            provider: "generic", // 服务器提供商 也可以是GitHub等等  通用（任何HTTP（S）服务器）选项 必须是generic
            url: "http://192.168.2.154:8888" // 服务器地址
          }
        ],
      },
      nodeIntegration: true, // 如果要使用渲染进程要使用主进程的方法要配置 node 的这个方法
    }
  },

主进程 background.js

'use strict'
// 首先 它从 electron 导入了几个模块
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() { // 创建窗口 createWindow 方法
  // Create the browser window.
  const win = new BrowserWindow({ // 创建浏览器窗口对象
    width: 1200,
    height: 700,
    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 // 如果要使用渲染进程要使用主进程的方法要配置 node 的这个方法，去vue.config.js的插件配置 nodeIntegration 设为true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) { // 加载网页到浏览器窗口
    // Load the url of the dev server if in development mode
    await 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.loadURL('http://192.168.x.xxx:8888')
  }
}

// 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 (BrowserWindow.getAllWindows().length === 0) 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 () => { // 监听app事件， 当 app 准备就绪就去创建这个方法
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // Install Vue Devtools
  //   try {
  //     await installExtension(VUEJS_DEVTOOLS)
  //   } 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()
    })
  }
}

Answer 1

不就是因为你在这里写死了加载局域网内的项目, 使用win.loadURL('app://./index.html')就是加载你本地的项目了。

if (process.env.WEBPACK_DEV_SERVER_URL) { // 加载网页到浏览器窗口

// Load the url of the dev server if in development mode
await 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.loadURL('http://192.168.x.xxx:8888')

}