Vue项目打包成.exe文件放在桌面的快捷打开方式，用electron实现

Dear 丶 2022-02-25 15:20 554阅读 0赞

# 首先到electron官网或者GitHub上下载一个模板electron-quick-start #

复制下面地址就可clone了  
Git地址:`git clone https://github.com/electron/electron-quick-start`

# 进入到electron-quick-start文件中 #

`cd electron-quick-start` (或者直接打开文件)

# 安装依赖 #

# npm start 跑起来就能看到官方demo（不用跑） #

# 看看electron-quick-start中的入口文件main.js, 以下是createWindow函数中的部分： #

function createWindow () {
        // Create the browser window.
        mainWindow = new BrowserWindow({
    	    width: 800, // 窗口的宽度
    	    height: 600, // 窗口高度
    	    webPreferences: {
    	    	nodeIntegration: true
    	    }
        })
        // and load the index.html of the app.
        mainWindow.loadFile('index.html') // 设置入口页面
        "electron_build": "electron-packager ./dist/ 快钱查询 --platform=win32 --arch=x64 --icon=./src/assets/kq.ico --overwrite" // 就是这一句命令
    },

对于"`electron_build`"这条命令的介绍如下:

electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

1.`sourcedir` 资源路径，在本例中既是`./dist/`  
2.`appname` 打包出的`exe`名称  
3.`platform` 平台名称（`windows`是`win32`）  
4.`arch` 版本，本例为`x64`

# 此时来打包vue项目(也可以一开始就打包) #

cnpm run build

# 在打包后的`dist`文件夹中增加`electron.js`和`package.json` #

这个`electron.js`与刚刚`build`文件夹下的`electron.js`一样，不过入口页面路径应该改为相对于当前文件的路径。即：

mainWindow.loadURL(url.format({ 
        pathname: path.join(__dirname, 'index.html'), //注意此处 
        protocol: 'file:', slashes: true 
    }))

这个`package.json`与最开始`electron-quick-start`项目中的`package.json`文件一致，不过里面的`main`应该指向从`build`文件夹中的`electron.js`。即：

{
      "name": "RFID",
      "version": "1.0.0",
      "description": "A minimal Electron application",
      "main": "electron.js",// 注意此处(如果之前没改名这里就不用改名)
      "scripts": {
        "start": "electron ."
      },
    }

# 最后就在`vue`项目中开始打包,运行之前设置的命令 #

npm run electron_build

如果打包后在本地打不开`exe`文件或者报错,那一定是  
因为静态资源路径的问题。现在打开项目，我们修改一下路径。  
第一步，将`vue config`下面`index.js`里面截图部分路径‘`/`’改为‘`./`’，

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    
    assetsPublicPath: './', // 改这里

重新打包好之后，我们在打开本地资源，这时我又发现一个新的问题，页面打开仍然是空白，但是控制台已经不报错了，哇，很难受，在半个小时后最终知道了问题所在，是因为路由的问题 坑啊！！！  
接下来我们打开`vue` 的`router`文件夹下的`index.js`文件,我的是这个,  
如下,脚手架搭建的项目，默认这块的值是`History` ，我们需要将`History` 改为`hash`。因为默认的他无法渲染页面。

export default new Router({
        // mode: 'history', // 后端支持可开
        mode: 'hash', // 在本地打开
        scrollBehavior: () => ({ y: 0 }),
        routes: constantRouterMap
    })

修改好后重新进行vue打包: `cnpm run build`  
`vue`打包好后再运行`cnpm run electron_build`

此时在你的`vue`项目中多出了一个类似 (快钱查询-`win32-x64`)的文件夹,  
此时你即刻打开它将里面的`exe`文件发送到桌面就可以了.