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文件
(纯属记录学习)