electron-vue

electron-vue打包之前没有任何问题,打包后点击主窗口不能打开新的窗口了

这个问题可能是由于打包后的文件路径发生了变化,导致window.open方法无法找到正确的目标窗口。你可以尝试以下方法解决这个问题:

  1. 在你的Vue组件中,使用require来引入child_process模块,然后调用exec方法打开新窗口。例如:
methods: {
  openNewWindow() {
    this.$refs.yourWindowRef.webContents.executeJavaScript(`window.open('https://www.example.com', '_blank')`);
  }
}
  1. 确保在打包时,将window.open方法添加到全局对象中。你可以在vue.config.js文件中添加以下内容:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  configureWebpack: {
    plugins: [
      new VueLoaderPlugin({
        resolve: {
          alias: {
            'vue': 'vue/dist/vue.esm.js'
          }
        }
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    }
  },
  chainWebpack: config => {
    config.externals({'electron': 'electron'}); // 将Electron从打包中排除
    config.node = {__dirname: false}; // 禁用node_modules中的__dirname魔术常量,以避免路径问题
  }
};
  1. 如果问题仍然存在,你可以尝试在打包后的HTML文件中手动添加window.open方法。在你的项目的public文件夹下创建一个名为runtime-with-public-path.html的文件,然后在其中添加以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div><!-- built files will be auto injected -->
  <script>if (!window.__INITIAL_SETUP__) { window.__INITIAL_SETUP__ = true; } window.location.href = "<%= htmlWebpackPlugin.options.publicPath %>";</script><!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-149657172-1"></script><!-- Web App Manifest --><script async src="/manifest.json"></script><!-- Add to homescreen for Chrome on Android --><script async src="/android_asset/manifest.json"></script><!-- Custom Theme Files --><script async src="<%= htmlWebpackPlugin.options.publicPath %>assets/dist/js/custom.min.js"></script><script async src="<%= htmlWebpackPlugin.options.publicPath %>assets/dist/js/polyfills.min.js"></script><script async src="<%= htmlWebpackPlugin.options.publicPath %>assets/dist/js/vendor.min.js"></script><script async src="<%= htmlWebpackPlugin.options.publicPath %>assets/dist/js/main.min.js"></script></body>
</html>

这个文件会将你的应用程序的静态资源(如CSS、JavaScript等)复制到一个新的HTML文件中,并在其中添加window.open方法。这样,当你的应用程序被打包时,用户可以通过访问这个HTML文件来打开新窗口。

【相关推荐】



  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7601192
  • 你也可以参考下这篇文章:electron-vue打包图标不见了?
  • 除此之外, 这篇博客: electron-vue打包编译中的 七、electron-vue设置全屏最大化 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    electron-vue设置全屏最大化,按esc退出全屏模式。
    在main文件的index.js中修改如下

    import { app, BrowserWindow,ipcMain,globalShortcut } from 'electron'
    
    /**
     * Set `__static` path to static files in production
     * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
     */
    if (process.env.NODE_ENV !== 'development') {
      global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    }
    
    let mainWindow
    const winURL = process.env.NODE_ENV === 'development'
      ? `http://localhost:9082`
      : `file://${__dirname}/index.html`
    
    function createWindow () {
    
      /**
       * Initial window options
       */
      mainWindow = new BrowserWindow({
        height: 563,
        width: 1000,
        frame: false,//添加后自定义标题//自定义边框
        resizable: true,//可否改变窗口大小
        fullscreen: true,
        // fullscreenable: false,
        // fullscreen: true,
        autoHideMenuBar: true //是否隐藏菜单
    
    // movable: false,//可否移动
    
    // webPreferences: {webSecurity: false}
      })
      //调出开发者工具
      mainWindow.webContents.openDevTools()
      //设置全屏模式,按esc退出
      mainWindow.setFullScreen(true)
      globalShortcut.register('ESC',()=>{
        mainWindow.setFullScreen(false)
      })
    	
      mainWindow.loadURL(winURL)
    
      mainWindow.on('closed', () => {
        mainWindow = null
      })
    }
    //准备就绪是加载
    app.on('ready', createWindow)
    
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', () => {
      if (mainWindow === null) {
        createWindow()
      }
    })
    //与渲染render通信,关闭缩小和放大
    ipcMain.on('minimize',e=>mainWindow.minimize());
    
    ipcMain.on('maximize',e=>{
      if (mainWindow.isMaximized()) {
          mainWindow.unmaximize()
      } else {
          mainWindow.maximize()
      }
    });
    
    ipcMain.on('close',e=>mainWindow.close());
    

    32位打包:找到./electron-vue/build config.js文件,修改 arch: 'x64’为ia32


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^