electron-vue多页面配置

前言

Electron-vue使用的单页面配置，由于项目中不可避免存在多个窗口，需要配置多个html地址，使用多页面入口，每个渲染进程窗口都是独立的，每个页面拥有自己的状态、视图。

调整`webpack`配置

1.新增muti-page.config.js文件

const glob = require('glob');
const path = require('path');
const PAGE_PATH = path.resolve(__dirname, '../src/renderer/page');
const HtmlWebpackPlugin = require('html-webpack-plugin');

exports.entries = function () {
  /*用于匹配 pages 下一级文件夹中的 index.js 文件 */
  var entryFiles = glob.sync(PAGE_PATH + '/*/main.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    /* 下述两句代码用于取出 pages 下一级文件夹的名称 */
    var entryPath = path.dirname(filePath)
    var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
    /* 生成对应的键值对 */
    map[filename] = filePath
  })
  return map
}

exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/index.ejs')
  let arr = []
  entryHtml.forEach((filePath) => {
      var entryPath = path.dirname(filePath)
      var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
      let conf = {
        template: filePath,
        filename: filename + `/index.html`,
        chunks: ['manifest', 'vendor', filename],
        inject: true,
        nodeModules: path.resolve(__dirname, '../node_modules'),
        templateParameters(compilation, assets, options) {
          return {
            // compilation: compilation,
            // webpack: compilation.getStats().toJson(),
            // webpackConfig: compilation.options,
            htmlWebpackPlugin: {
              files: assets,
              options: options
            },
            process,
          }
        }
      }
      if (process.env.NODE_ENV === 'production') {
        let productionConfig = {
          minify: {
            removeComments: true,         // 移除注释
            collapseWhitespace: true,     // 删除空白符和换行符
            removeAttributeQuotes: true   // 移除属性引号 
          },
          chunksSortMode: 'dependency'    // 对引入的chunk模块进行排序
        }
        conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置
      }
      arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

2.修改webpack.renderer.config.js

const {entries, htmlPlugin} = require('./muti-page.config')
// 修改rendererConfig
let rendererConfig = {
  // ... ...
  entry: entries(),
  // ... ...
  plugins: [
    new ExtractTextPlugin('[name].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()
   ].concat(htmlPlugin()),
   output: {
    filename: '[name]/index.js',
    // ... ... 
   },
  // ... ... 
}

3.调整dev-runner.js支持多页面的热重载

function startRenderer () {
  return new Promise((resolve, reject) => {
    // rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
    // config Multi page hot reload
    for (let key in rendererConfig.entry) {
      rendererConfig.entry[key] =  [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry[key])
    }
    // ... ...
  })
}

更改目录结构

1.新增page文件夹，剥离组件、工具等

image.png

2.每个文件目录需要提供两个文件index.ejs、main.js

image.png

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="referrer" content="no-referrer"/>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <script>
      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

// if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.config.productionTip = false

Vue.prototype.eventBus = new Vue()
Vue.prototype.$toast = function (msg) {
  console.log(msg)
}

/* eslint-disabodele no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

修改静态文件路径

由于目录往下提了一级，原先./static 的引用方式调整为../static 避免打包后静态文件引用失败的问题

窗口创建目录调整

const winUrl = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080/xxx`
  : `file://${__dirname}/xxx/index.html`

electron-vue多页面配置

前言

调整webpack配置

更改目录结构

修改静态文件路径

窗口创建目录调整

调整`webpack`配置