electron-vue打包之前没有任何问题,打包后点击主窗口不能打开新的窗口了
这个问题可能是由于打包后的文件路径发生了变化,导致window.open
方法无法找到正确的目标窗口。你可以尝试以下方法解决这个问题:
require
来引入child_process
模块,然后调用exec
方法打开新窗口。例如:methods: {
openNewWindow() {
this.$refs.yourWindowRef.webContents.executeJavaScript(`window.open('https://www.example.com', '_blank')`);
}
}
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魔术常量,以避免路径问题
}
};
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文件来打开新窗口。
【相关推荐】
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