electron-vue 项目怎样加入第二个页面html

Question

我的理解 开发环境中 electron-vue 的主页面模板是 src目录下的 index.ejs
如果我想再开一个页面（另一个渲染进程）, 这个页面主要是为了将打印信息画成html然后打印，这时需要怎么做，模板需要放在哪里 src/main/index.js 才能使用这个模板创建页面

// 自己的尝试
在 src/main/index.js 中加入

 printWindow = new BrowserWindow({  // 隐藏的页面（另一个渲染进程），用于打印
    height: 100,
    title: '打印页',
    show: false,
    width: 100
 })

printWindow.loadURL(`file://${__dirname}/renderer/print.html`);

这样尝试后没有作用，主进程向这个渲染进程发送消息，没有收到响应

同样，如果不实用另一个页面，而是在主页面中内嵌webview来实现打印功能，那么这个webview对应的html需要放在哪里，vue的代码才可以调用这个webview (webview 的src地址正确)

Answer 1

index.ejs 只是模板文件而已, 由于 electron 运行的是本地文件, 使用单页面开发的模式在无法直接跳转路由.
可以使用 vue pages 进行多页面开发, electron-vue 使用的是 vue-cli 2.X 版本, 可以参考 vue-cli 2.x 的多页面配置.

具体操作:

1. .electron-vue 文件夹下添加 util.js

const path = require('path')
const glob = require('glob')

// 入口文件所在文件夹为 renderer/pages
function getPagesConfig(pagesPath = path.resolve(__dirname, '../src/renderer/pages/**?')) {
  let entries = {}
  let plugins = []
  glob.sync(pagesPath).forEach(entry => {
    let basename = path.basename(entry, path.extname(entry))
    entries[basename] = path.join(entry, 'main.js')
    plugins.push({
      title: basename,
      filename: basename + '.html',
      chunks: [basename]
    })
  })
  return { entries, plugins }
}

module.exports = {
  getPagesConfig
}

1. 修改 .electron-vue/webpack.renderer.config.js 文件

添加代码片段

const { getPagesConfig } = require('./util')
const PagesConfig = getPagesConfig()

const HtmlWebpackPluginDefaultConfig = {
  template: path.resolve(__dirname, '../src/index.ejs'),
  nodeModules: devMode && path.resolve(__dirname, '../node_modules')
}
const HtmlPlugins = PagesConfig.plugins.map(
  options =>
    new HtmlWebpackPlugin({
      ...HtmlWebpackPluginDefaultConfig,
      ...options
    })
)

修改入口文件 rendererConfig.entry 为 PagesConfig.entries
将 rendererConfig.plugins 中的原 HtmlWebpackPlugin 部分改为 ...HtmlPlugins即可

  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
// 改为
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    ...HtmlPlugins,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

main 进程中加载页面

win.loadURL(
  process.env.NODE_ENV === 'development'
    ? `http://localhost:9080/pagename.html`
    : `file://${__dirname}/pagename.html`
)

Answer 2

首先建议你先看完API，看你的描述都没有理解API，这是打开新窗口的：https://electronjs.org/docs/api/window-open；
然后，是你的通讯代码没有，不知道你具体出错在哪；
最后，你这个需求是很基础的功能，没什么难点的，多看看文档吧。

Answer 3

我也遇到相同问题，是vue的路由问题，具体可以参考这篇文章
vue-electron踩坑日记——多窗口界面显示问题