无法读取未定义的属性“匹配”。 我对此一无所知，因为它没有指向任何文件

Question

我收到此错误：无法读取未定义的属性match 。

无法读取未定义的属性“匹配”

这是错误消息指向的 polyfills.js 中的行：

进程.版本.匹配

我对这类问题没有任何线索，因为它不指向任何特定文件。 您能看看这个 github 回购协议吗？

https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding

更新 1)

感谢 Elias 的评论，我意识到 vue.config.js 被搞砸了。 现在 vue.config.is 是：

// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide 
/guide.html#web-workers
const WorkerPlugin = require('worker-plugin')

module.exports = {
  // options...
  publicPath: '',
  pluginOptions: {
    electronBuilder: {
      // Prevent bundling of certain imported packages and instead 
retrieve these external dependencies at runtime.
      // In order to connect to websocket.
      externals: ['ggc'],
      builderOptions: {
        productName: 'GGC',
        win: {
          icon: './public/app.ico'
        },
        mac: {
          icon: './public/icons/Icon.icns',
          target: [
            'pkg',
            'dmg',
            'zip',
          ],
        },
        linux: {
          icon: './public/app.png'
        }
      },
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#webpack-configuration
      chainWebpackRendererProcess: (config) => {
        // Chain webpack config for electron renderer process only
        // The following example will set IS_ELECTRON to true in your 
app
        config.plugin('define').tap((args) => {
          args[0]['IS_ELECTRON'] = true
          return args
        })
      },
      mainProcessFile: 'src/background.js',
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#typescript-options
      disableMainProcessTypescript: false, // Manually disable 
typescript plugin for main process. Enable if you want to use regular 
js for the main process (src/background.js by default)
      mainProcessTypeChecking: false, // Manually enable type checking
 during webpck bundling for background file.
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#preload-files
      preload: 'src/preload.js',
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/security.html#node-integration
      nodeIntegration: true
    },
    // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#web-workers
    configureWebpack: {
      plugins: [new WorkerPlugin()]
    }
  }
}

关于 nodeIntegration，我在 /src/background.js 中禁用了它，因为我读到拥有 preload.js 文件更安全

这是我的新 webpack.config.js（它也被搞砸了，就像 vue.config.is，每个 module.exports 都覆盖了前一个）：

module.exports = {
  entry: './src/background.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'background.js'
  },
  // https://github.com/GoogleChromeLabs/worker-plugin
  plugins: [
    new WorkerPlugin()
  ]
}

我不明白我应该在 webpack 中启用什么： https://webpack.js.org/plugins/define-plugin/

更新 2)

我在 vue.config.js 中禁用了 nodeIntegration

vue.config.js：

// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide 
/guide.html#web-workers
const WorkerPlugin = require('worker-plugin')

module.exports = {
  // options...
  publicPath: '',
  pluginOptions: {
    electronBuilder: {
      // Prevent bundling of certain imported packages and instead 
retrieve these external dependencies at runtime.
      // In order to connect to websocket.
      externals: ['ggc'],
      builderOptions: {
        productName: 'GGC',
        win: {
          icon: './public/app.ico'
        },
        mac: {
          icon: './public/icons/Icon.icns',
          target: [
            'pkg',
            'dmg',
            'zip',
          ],
        },
        linux: {
          icon: './public/app.png'
        }
      },
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#webpack-configuration
      chainWebpackRendererProcess: (config) => {
        // Chain webpack config for electron renderer process only
        // The following example will set IS_ELECTRON to true in your 
app
        config.plugin('define').tap((args) => {
          args[0]['IS_ELECTRON'] = true
          return args
        })
      },
      mainProcessFile: 'src/background.js',
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#typescript-options
      disableMainProcessTypescript: false, // Manually disable 
typescript plugin for main process. Enable if you want to use regular 
js for the main process (src/background.js by default)
      mainProcessTypeChecking: false, // Manually enable type checking
 during webpck bundling for background file.
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#preload-files
      preload: 'src/preload.js',
      // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/security.html#node-integration
      nodeIntegration: false
    },
    // https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#web-workers
    configureWebpack: {
      plugins: [new WorkerPlugin()]
    }
  }
}

并在 webpack.config.js 中定义流程

webpack.config.js：

module.exports = {
  entry: './src/background.ts',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'background.js'
  },
  // https://github.com/GoogleChromeLabs/worker-plugin
  plugins: [
    new WorkerPlugin()
  ],
  // https://webpack.js.org/plugins/define-plugin/
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })
}

当运行 yarn electron:serve 我现在得到错误：无法读取未定义的属性“匹配”

如果我在 vue.config.js 中保留 nodeIntegration:true 并将 src/background.js 更改为：

webPreferences: {
  nodeIntegration: true,
  //nodeIntegration: false,
  //contextIsolation: true, // protects against prototype pollution
  //preload: path.join(__dirname, "../dist_electron/preload.js"),
},

运行 yarn electron:serve 时出现此错误：“无法读取未定义的属性‘app’”

这是 /src/store/modules/app.ts：

import Vue from 'vue'
import { loadSettings, setSettings } from '@/services/electron-
services/setting/setting'

const TOGGLE_THEME = 'TOGGLE_THEME'

const stateRecord: App = loadSettings()

const app = {
  state: {
    currentTheme: stateRecord.currentTheme || 'light',
  },
  mutations: {
    [TOGGLE_THEME](state: App, currentTheme: Theme) {
      state.currentTheme = currentTheme
    },
  },
  actions: {
    TOGGLE_THEME({ commit }: any, payload: App) {
      setSettings('settings.currentTheme', payload.currentTheme)
      commit(TOGGLE_THEME, payload.currentTheme)
    },
  },
}

export default app

但我更愿意在保持 nodeIntegration: false 的同时解决问题，以保持应用程序更安全

更新 3) 我发现一旦我评论此行，“无法读取未定义的属性match ”问题就消失了

const theme = db.get<Theme>('settings.currentTheme');

在 src/background.ts 中：

async function create Window() {
    const windowSize = db.get<WindowSizeModel>('windowSize');
    //const theme = db.get<Theme>('settings.currentTheme');
    win = new BrowserWindow({
      ...windowSize,
      webPreferences: {
        nodeIntegration: false,
        contextIsolation: true,
        preload: path.join(__dirname, "../dist_electron/preload.js"),
      },
  })

和 db.get('settings.currentTheme') 来自这个文件：

src/services/electron-services/database/index.ts:

import Lowdb from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import LodashID from 'lodash-id'
import { app, remote } from 'electron'

interface Schema {
  windowSize: {
    height: number
    width: number
  }
  settings: {
    currentLang: string
    currentTheme: string
  }
}

const isRenderer: boolean = process.type === 'renderer'
// Render process use remote app
const APP: Electron.App = isRenderer ? remote.app : app

const STORE_PATH: string = APP.getPath('userData')

// In production mode, during the first open application
// APP.getPath('userData') gets the path nested and the datastore.js  
is loaded.
// if it doesn't exist, create it.
if (!isRenderer) {
  if (!fs.pathExistsSync(STORE_PATH)) {
    fs.mkdirpSync(STORE_PATH)
  }
}

class DB {
  private db: Lowdb.LowdbSync<Schema>
  public constructor() {
    const adapter: Lowdb.AdapterSync<Schema> = new FileSync<Schema> 
(path.join(STORE_PATH, '/db.json'))
    this.db = Lowdb(adapter)
    // Use lodash-id must use insert methods
    this.db._.mixin(LodashID)
    if (!this.db.has('windowSize').value()) {
      this.db
        .set('windowSize', {
          width: 1025,
          height: 749,
        })
        .write()
    }
    if (!this.db.has('settings').value()) {
      this.db
        .set('settings', {
          //currentLang: 'en',
          currentTheme: 'light',
        })
        .write()
    }
    // Purple to Night
    if (this.db.get('settings.currentTheme').value() === 'purple') {
      this.db.set('settings.currentTheme', 'night').write()
    }
    if (!this.db.has('settings.currentLang')) {
      this.db.set('settings.currentLang', 'en').write()
    }
  }

  // read() is to keep the data of the main process and the 
rendering process up to date.
  public read() {
    return this.db.read()
  }
  public get<T>(key: string): T {
    return this.read().get(key).value()
  }
  public find<T>(key: string, id: string): T {
    const data: $TSFixed = this.read().get(key)
    return data.find({ id }).value()
  }
  public set<T>(key: string, value: T): T {
    return this.read().set(key, value).write()
  }
  public insert<T>(key: string, value: T): T {
    const data: $TSFixed = this.read().get(key)
    return data.insert(value).write()
  }
  public update<T>(key: string, id: string, value: T): T {
    const data: $TSFixed = this.read().get(key)
    return data.find({ id }).assign(value).write()
  }
  public remove<T>(key: string, id: string): T {
    const data: $TSFixed = this.read().get(key)
    return data.removeById(id).write()
  }
  public filter<T, K>(key: string, query: K): T {
    const data: $TSFixed = this.read().get(key)
    return data.filter(query).value()
  }
  public has(key: string): boolean {
    return this.read().has(key).value()
  }
}

export default new DB()

Answer 1

你的问题是vue.config.js只导出最后一个 object，每个module.exports覆盖以前的导出。

您可能遇到的另一个问题是您禁用nodeIntegration ，因此process确实是undefined的，除非您启用webpacks definition 。

编辑：要使require在渲染器上可用，您需要在background.ts文件中启用nodeIntegration或在vue.config.js中禁用它。