electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等

1.在electron 的目录文件 index.vue中：

 <template>
  <div class="inspeckCheck_content">
    <nav-bar />
    <banner />
    <div class="title-container">
       <div class="title"> 欢迎使用自助机服务 </div>
        <div class="right" @click="readCard">读卡</div>
     </div>
    <webview id="geekori" :src=" 'http://192.168.0.149:8888/?time=' + new Date()" style="width:1080px; height:862px" nodeintegration="true"></webview>
    <foot-bar />
  </div>
</template>
export default {
  name: 'dashboard',
  data() {
    return {
      Dll: null,
      Hdle: 0,
      readFlag: true
    }
  },
  components: {
    navBar,
    footBar,
    banner
  },
  computed: {
  },
  mounted() {
    this.onload()
  },
  methods: {
    /* 和webview 通信*/
    onload() {
      const webview = document.getElementById('geekori')
      const loadstart = () => {
        console.log('loadstart')
      }
      const loadstop = () => {
        console.log('loadstop')
      }
      webview.addEventListener('did-start-loading', loadstart)
      webview.addEventListener('did-stop-loading', loadstop)
      webview.addEventListener('dom-ready', () => {
        webview.openDevTools()// webview加载完成，可以处理一些事件了
      })
      // 在此监听事件中接收webview嵌套页面所响应的事件
      webview.addEventListener('ipc-message', function(event) {
        console.log(11111)
        console.log('在此监听事件中接收webview嵌套页面所响应的事件', event.channel)
        if (event.channel === 'print') {
          // 原生处理打印成功后，告诉嵌入页面
          webview.send('ping', '打印成功') // 向webview嵌套的页面发送信息
        }
      })
    }
    }

2.在main主进程中 index.js
注意： 必须写
webPreferences: {
nodeIntegration: true // 注入node模块
}
不然下边vue的项目中 window.require一直未undefined

mainWindow = new BrowserWindow({
    height: 1000,
    useContentSize: true,
    width: 1080,
    frame: false,
    resizable: false, // 禁止改变主窗口尺寸
    webPreferences: {
      nodeIntegration: true // 注入node模块
    }
  })

3、嵌入页的步骤
在vue搭建的项目中

（1）安装electron cnpm install electron -S

(2）代码如下:

 methods: {
    open(routeData) {
      console.log(routeData)
      // 没有在electron里面嵌入，不可用
      if (window.require) {
        // debugger
        const { ipcRenderer } = window.require('electron')
        ipcRenderer.sendToHost('print') // 向原生发送信息
        ipcRenderer.on('ping', (event, message) => { // 接收electron原生返回的信息
          console.log('接收electron原生返回的信息', event, message)
        })
      }

      this.$router.push({
        path: routeData.path,
        query: routeData.query
          ? {
            key: this.$Base64.encode(JSON.stringify(routeData.query))
          }
          : undefined
      })
    },
  }

参考：https://www.cnblogs.com/badaoliumangqizhi/p/12995335.html