记录一次Vue Electron 创建流程

最新推荐文章于 2024-04-26 17:54:13 发布

IT老大哥

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量105

点赞数

文章标签： vue.js electron javascript

本文链接：https://blog.csdn.net/wanglong126/article/details/131271184

版权

首先自行安装nodejs和npm

设置npm代理

npm config set registry https://registry.npm.taobao.org
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

安装`vue`脚手架

npm install -g @vue/cli

创建项目

vue create ldgtool

选择Vue2

其中ldgtool为项目名称，项目名称不要有中文

cd到项目文件夹

安装 electron-builder

vue add electron-builder

选择 Version ^13.0.0

运行调试项目

npm run electron:serve

打包项目

npm run electron:build

文件会生成在dist_electron目录中

打包程序中文名称

编辑 package.json 追加以下内容

  "productName": "老大哥小助手",
  "author": {
    "name" : "itldg",
    "email" : "wanglong126@139.com",
    "url" : "https://github.com/wanglong126"
  },
  "description": "简单的编程辅助工具",

如果出现 `__dirname is not defined` 错误

根目录新建 vue.config.js

module.exports = {
　　//解决__dirname错误
    pluginOptions: { electronBuilder: { nodeIntegration: true } },
    //修改标题栏名称
        chainWebpack: (config) => {
        config.plugin('html').tap((args) => {
            args[0].title ='老大哥小助手'
            return args
        })
    },
}