Vue前端项目打包成exe

Vue前端项目打包成exe

1、Vue打包成dist文件

1、确保router文件的index.js

这里将mode：“history"，隐藏起来，默认使用hash模式。

const router = new VueRouter({
  // mode: 'history',
  routes
})

2、vue.config.js

const { resolve } = require('path')
module.exports = {
    assetsDir: 'static',
    devServer: {
        port: 8000,
        open: true
    },
    lintOnSave: false,
    // 打包成exe文件这个必有
    publicPath: './',
    // publicPath: process.env.NODE_ENV === 'production'
    //     ? '/production-sub-path/'
    //     : '/',
    configureWebpack: {
        resolve: {
            alias: {
                // 以@代表src目录
                '@': resolve('src')
            }
        }
    }
}

2、Electron项目文件（Electron官网教程）

1、创建打包项目文件和安装Electron

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

2、在项目根目录下创建main.js

​ 主脚本指定了运行主进程的 Electron 应用程序的入口(对我们而言，是 main.js 文件)。 通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程

// 从electron包中导入app,BrowserWindow模块
const { app, BrowserWindow } = require('electron')
// 导入path包，该包为操作文件路径提供了实用的功能
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
// 修改网页文件路径
  win.loadFile('index.html')
}

app.whenReady().then(() => {
// 通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口
  createWindow()
// 添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
// 添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

3、修改main.js中网页文件的路径

将前面 一中打包的dist文件放到electron项目根目录中，并更改main.js中的win.loadFile()路径

4、项目根目录下创建预加载脚本prelaod.js

​ 预加载脚本(在本例中是preload.js 文件)充当Node.js 和您的网页之间的桥梁。 它允许你将特定的 API 和行为暴露到你的网页上，而不是危险地把整个 Node.js 的 API暴露。 在本例中，我们将使用预加载脚本从process对象读取版本信息，并用该信息更新网页

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

• 第 1 行：首先定义了一个事件监听器，当web页面加载完成后通知你。
• 第 2 行：接着您定义了一个功能函数用来为index.html中的所有placeholder设置文本。
• 第 7 行：接下来您遍历了您想展示版本号的组件列表。
• 第 8 行：最终，您调用 replaceText 来查找index.html中的版本占位符并将其文本值设置为process.versions的值。

5、修改package.json

Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。 您的应用程序的主脚本是 main.js，所以相应修改 package.json 文件：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

此时可以用：npm start 运行项目,查看效果

6、打包并分发应用程序

//1、导入Electro Forge到应用文件夹
npm install --save-dev @electron-forge/cli
npx electron-forge import
//2、创建分发版本
npm run make

7、exe文件查看
在生成的out文件夹下my-electron-app1-win32-x64文件夹中的exe文件

（纯属记录学习）