@万里挑一 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日

悬赏问题

  • ¥20 Html备忘录页面制作
  • ¥15 黄永刚的晶体塑性子程序中输入的材料参数里的晶体取向参数是什么形式的？
  • ¥20 数学建模来解决我这个问题
  • ¥15 计算机网络ip分片偏移量计算头部是-20还是-40呀
  • ¥15 stc15f2k60s2单片机关于流水灯，时钟，定时器，矩阵键盘等方面的综合问题
  • ¥15 YOLOv8已有一个初步的检测模型，想利用这个模型对新的图片进行自动标注，生成labellmg可以识别的数据，再手动修改。如何操作？
  • ¥30 NIRfast软件使用指导
  • ¥20 matlab仿真问题，求功率谱密度
  • ¥15 求micropython modbus-RTU 从机的代码或库？
  • ¥15 django5安装失败