使用electron将vue项目打包为web或者是app应用

最新推荐文章于 2025-04-13 15:52:50 发布

辣子鸡丁上将

最新推荐文章于 2025-04-13 15:52:50 发布

阅读量1.2w

点赞数 1

分类专栏： Vue 文章标签： vue electron

本文链接：https://blog.youkuaiyun.com/weixin_39205240/article/details/81258986

版权

本文介绍如何将Vue项目转化为 Electron 桌面应用。首先通过安装`electron`和`electron-packager`开始，然后在`package.json`中配置`scripts`，调整`assetsPublicPath`。接着，在`dist`文件夹中复制必要的文件并修改`electron.js`的加载路径。最后，执行`npm run electron_build`即可生成可执行应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue中添加electron 和 electron-package

cnpm install electron --save-dev

cnpm install electron-packager --save-dev //这个是打成exe文件的插件，之后要用，提前下载好

2. vue项目中package.ison文件中“scripts”添加

"electron_dev": "npm run build && electron build/electron.js",


"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./favicon.ico --overwrite"

Tip:"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./favicon.ico --overwrite"中的相对路径不能错

关于electron-packager的配置，简单介绍一下。 
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
sourcedir 资源路径，在本例中既是./dist/
appname 打包出的exe名称
platform 平台名称（windows是win32）
arch 版本，本例为x64
后边的配置项都是选填，可以设置二进制打包等，默认是没有这些的，这里只选填了exe的图标。

3. Tip:config/index.js中应设置assetsPublicPath: './',

build: {
        sitEnv: require('./sit.env'),
        prodEnv: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',          //请根据自己路径配置更改
        staticPath:'./static/',          //请根据自己路径配置更改
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.

最低0.47元/天解锁文章