vue3+electron 解决打包后首页打开空白，以及打包后路由不跳转等问题

electron打包是用的官方文档提供的 electron-forge，酌情根据项目选择 也可以使用electron-builder打包，我这边使用的前者，所以相关解决问题都是前者的。

electron-forge是做什么的 可以实现什么 具体可以查看官方文档。

https://www.electronforge.io/

一、安装electron-forge

npm i -D @electron-forge/cli

二、安装完之后需要初始化一下 electron-forge

electron-forge 在使用之前需要初始化一下，它会自动改变 package 的内容，然后添加几个打包的指令，不需要自己手动添加.

npx electron-forge import

插个题外（VS Code初始化的话 会将项目文件变为绿色的 并且后面带个大写的U）解决方法：

打开 VS Code的 菜单栏 —> 文件 —> 首选项  —> 设置

在搜索栏中搜索 Git:Enable 然后取消勾选

如果没有出现 则忽略~~

三、生成可执行文件 package和打包make

1. 在  npm run make  之前 需要先将项目 npm run package 

运行成功之后，会输出项目目录到 out 目录下（如图）

2. npm run make

make 之后会输出到项目目录的 out/make 下 (压缩包等)

现在来说遇到的问题

一、打开项目空白，重定向到 chrome-error://chromewebdat

问题原因：打包好之后打开.exe文件，项目空白，控制台查看是重定向到chrome-error://chromewebdat 这个路径下。控制台也不会进行报错！

说明：

 electron项目在开发阶段，因为使用webpack / vite 脚手架,启用了webServer提供的http服务，所以有路由功能，当我们运行npm run electron:serve的时候，最后可以直接加载http://localhost:8080。在终端里面就可以显示页面。

当electron项目打包之后，成为桌面程序，这个时候就没有http服务支撑，所以加载的是静态页面，win.loadURL("file://./index.html")。

解决方案：

1. 改变路由设置的模式，将history改为hash，具体代码看下方写的《路由不跳转问题》

2. 根据判断生产环境  mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))   在electron main.js 中 无法使用 （.env.production / .env.development）中配置的环境变量   所以安装一个cross-env插件配置。

整体代码：

const isDev = require('electron-is-dev')
const mode = isDev == true ? 'development' : 'production';

if (mode === 'development') {
    mainWindow.loadURL("http://localhost:8080");
    mainWindow.webContents.openDevTools()
} else {
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))
}

二、由于生产环境有时出现问题 但没有控制台查看报错信息。故而设置一下不会引发多软件重用的快捷键方式(alt+ctrl+shift+d)。

const { app, globalShortcut } = require('electron')


globalShortcut.register('Alt+CommandOrControl+Shift+D', () => {
    mainWindow.webContents.openDevTools({ mode: 'detach' }) //开启开发者工具
})

三、打包之后，请求不到后端数据，有的人是app:// 有的人是file://  

因为在本地环境 需要反向代理解决跨域问题，“/api”则是在vite.config.js中配置的server。而生产环境配置的代理就不在管用了，需要将请求的路径(http://www.baidu.com)配置成baseURL，如果跨域的话 就要看后端是否已经做了跨域处理，下方import.meta.env.MODE 三元判断区也可以用《上方所提到的isDev》

在axios配置的文件添加：

const BASEURL = import.meta.env.MODE == 'development' ? '/api' : 'http://www.baidu.com';
axios.defaults.baseURL = BASEURL;

const service = axios.create({
  // 超时
  timeout: 10000
})

在electron main.js中添加

四、因为electron main.js中配置的 mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))  npm run make 打包项目后总感觉代码不是最新的。

问题原因：因为请求接口报错就在控制台打印了一下信息，本地环境有这个console.log，但是打包生成后.exe文件里的控制台无这个console.log。

解决方案：一番查找后，是因为之前项目用的electron-builder他会自动往dist文件夹中打包项目文件，但是npm run make是打包进out main.js定向的是 ../dist/index.html，所以要先进行 npm run build 之后 再进行 npm run make 打包出最新的 .exe 文件。

---

路由不跳转，登录之后页面无跳转。

路由不跳转问题原因：

是因为electron需要将vue-router的mode调整为hash模式(两种写法)

export default new Router({
 mode: 'hash', //这里history修改为hash
 scrollBehavior: () => ({y: 0}),
  routes: constantRouterMap,
})

export default new createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: constantRoutes
})

登录之后无跳转问题原因：

在项目中登录等存储token，运用到了js-cookie这个库，cookie是来操作浏览器的

然而这个库在electron下会无法使用，（就这还不报错）从而导致登录成功了之后 各个函数都走通了 接口也走通了。但是不进行跳转。是因为写cookie 读cookie的操作失败了。

解决方案：

不再使用js-cookie，根据项目的情况酌情使用 lacalStorage 或者 sessionStorage

const TokenKey = 'Admin-Token'

export function getToken() {
  return sessionStorage.getItem(TokenKey)
}

export function setToken(token) {
  return sessionStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return sessionStorage.removeItem(TokenKey)
}

喜欢的话 可一键三连~ 点赞 收藏 评论~~