@万里挑一 2023-09-12 09:21 采纳率: 100%
浏览 10
已结题

electron-vue

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

  • 写回答

2条回答 默认 最新

  • 呈两面包夹芝士 2023-09-12 09:27
    关注

    这个问题可能是由于打包后的文件路径发生了变化，导致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文件来打开新窗口。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 9月30日
  • 已采纳回答 9月22日
  • 创建了问题 9月12日

悬赏问题

  • ¥15 请各位帮我看看是哪里出了问题
  • ¥15 vs2019的js智能提示
  • ¥15 关于#开发语言#的问题：FDTD建模问题图中代码没有报错，但是模型却变透明了
  • ¥15 uniapp的h5项目写一个抽奖动画
  • ¥15 hadoop中启动hive报错如下怎么解决
  • ¥15 如何优化QWebEngineView 加载url的速度
  • ¥15 关于#hadoop#的问题，请各位专家解答！
  • ¥15 如何批量抓取网站信息
  • ¥15 Spring Boot离线人脸识别
  • ¥15 使用Ant Design Pro vue的时候，使用环境变量的时候，构建报错是什么原因