1.我使用有两种方式进行安装
a.使用vue-cli
(1) 通过vue-cli创建vue项目
(2) 使用npm run build 进行打包 (提前在config中配置打包的路径 如果是vue-vli3 以上的用户需要自行创建vue.config.js文件)
module.exports = {
publicPath: "./", // 公共路径(必须有的)
outputDir: "dist", // 输出文件目录
assetsDir: "static", //静态资源文件名称
lintOnSave: false,
productionSourceMap: false, //去除打包后js的map文件
devServer: {
//启动项目在8080端口自动打开
open: true,
port: 8080,
proxy: null,
},
//去掉console
configureWebpack: (config) => {
// 判断为生产模式下,因为开发模式我们是想保存console的
if (process.env.NODE_ENV === "production") {
config.optimization.minimizer.map((arg) => {
const option = arg.options.terserOptions.compress;
option.drop_console = true; // 打开开关
return arg;
});
}
},
};
(3) 然后安装electron
如果使用npm无法成功安装 则使用cnpm
1.安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装electron
cnpm install -g electron
(4) 成功安装之后我们需要在打包好的dist文件夹中配置 main.js 文件和package.json文件
// main.js文件
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
width:800,
height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
win = new BrowserWindow(windowConfig);//创建一个窗口
win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //开启调试工具
win.on('close',() => {
//回收BrowserWindow对象
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
});
package.json
{
"name": "demo",
"productName": "项目名称",
"author": "作者",
"version": "1.0.4",
"main": "main.js",
"description": "项目描述",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "demo",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
}
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0",
"electron-updater": "^2.22.1"
}
}
b.使用electron-vue
(1) 在使用electron-vue之前我们需要安装好vue-cli
npm install -g vue-cli
(2) 接下来安装electron-vue模板 安装完成之后切换至我们新建项目的目录内
vue init simulatedgreg/electron-vue my-project
(3) 然后进行npm install 或者 yarn
这时我们大概率会遇到一些报错 原文
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install electron --electron_mirror=https://npm.taobao.org/mirrors/electron/
(4) 此时我们再通过 npm run dev 运行