使用 electron 官方例子打包VUE项目

·  阅读 68

# 1、克隆官方demo

git clone https://github.com/electron/electron-quick-start
复制代码

2、项目根目录下启动

npm install
npm start
复制代码

如果出现窗口说明成功。

3、放入自己的项目。

vue项目打包好的文件在dist文件夹中。 将文件夹中的文件放在electron项目的根目录。 重新运行一下。

4、如果出现静态资源(图片和element文字图标)加载不出来

  • vue 打包后页面空白

因为打包后的css和js的路径不正确

config/index.js

将build下,assetsPublicPath: '/', 修改为assetsPublicPath: './',

  • 图片不显示

build/utils.js

添加 publicPath:'../../', 即可

stickPicture.png

5、打包exe文件

安装electron-builder

npm install electron-builder (会把安装的配置信息放在 dependencies 下,实际应该在 devDependencies 下)
或 
npm install electron-builder --save--dev (推荐)
复制代码

安装之后应该把 dependencies 下的 "electron-builder": "^22.10.5" 放在 devDependencies 下面

"devDependencies": {
    "electron""^12.0.2",
    "electron-builder""^22.10.5"
},
"dependencies": {
}
复制代码

在 package.json 下配置 build

"scripts": {
    "start""electron .",
    "build""electron-builder --win --x64"
},
复制代码

在build 配置下 添加

"build": {
    "productName""exe项目名称",
    "appId""com.xxx.app",
    "copyright""鄂ICP备********号",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "icon""build/icons/icon.ico", //程序小图标
      "target": [
        "nsis",
        "zip"
      ]
  },
    "electronDownload": {
    "mirror""https://npm.taobao.org/mirrors/electron/"   //淘宝镜像
  }
},
复制代码

6、运行 npm run build

打包好的文件在 dist 文件夹下

注意:vue项目的 router 设置必须是 hash 模式

截图.png

分类:
前端
标签:
分类:
前端
标签: