vite+vue3+electron项目搭建详细

llc18230851423

已于 2024-07-31 16:53:47 修改

阅读量1.3k

点赞数 23

文章标签： electron vue.js 前端

于 2024-07-20 15:33:08 首次发布

本文链接：https://blog.csdn.net/llc18230851423/article/details/140567362

版权

一、使用vite创建vue项目

1. 在项目文件夹下打开终端，输入下面命令创建vue项目

npm create vite@latest

然后选择语言，看需求选择用TS还是JS，为了方便我选择了JS

2. 进入项目目录，安装依赖

cd /你的项目名称/

npm install

3. 运行vue

npm run dev

终端显示如下

 VITE v5.3.4  ready in 770 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

然后访问http://localhost:5173/显示如下页面，vue项目就创建成功了

二、安装electron

1. 在项目中执行electron下载命令：

npm install electron -D

国内小伙伴可能出现安装不了的问题，我们可以打开npm的配置文件

npm config edit

然后会出现一个文本，我们去编辑文本将下面配置添加上去，如果有就这几项配置那就去修改

registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

执行下面命令清除缓存，在安装就好了

npm cache clean --force

2. 定义electron的入口文件

vue的入口文件是index.html， electron的入口文件是main.js。所以要对入口进行整合。

先在项目根目录手动创建一个目录，然后在该目录下创建一个main.js。

修改 package.json 文件指定入口为 electron/main.js，修改 type 为 commonjs，并添加 electron:dev 命令以开发模式运行 Electron:

{
  "type": "commonjs",
  "main": "electron/main.js",
  "scripts": {
    "electron:dev": "electron ."
  }
}

三、运行electron

1，在 electron 文件夹，新建 index.html 文件，添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Electron</title>
  </head>
  <body>
    <h1>Hello Electron </h1>
  </body>
</html>

然后在 electron 文件夹下的 main.js 文件里写入下面代码：

const { app, BrowserWindow } = require('electron')
const path = require("path")

const createWindow = () => {
  const mainWin = new BrowserWindow({
    width: 1000,
    height: 800,
  })
  
  mainWin.loadFile(path.join(__dirname, "./index.html"));

}

// 准备完成调用创建方法
app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

运行指令

npm run electron:dev

显示下面窗口就代表运行成功了

2，与Vue结合显示vue页面

将 main.js 代码修改如下：

const { app, BrowserWindow } = require('electron')
// const path = require("path")

const createWindow = () => {
  const mainWin = new BrowserWindow({
    width: 1000,
    height: 800,
  })
  
  //将链接修改成我们运行Vue时的地址：http://localhost:5173
  //mainWin.loadFile(path.join(__dirname, "./index.html"));
  mainWin.loadURL('http://localhost:5173')

}

// 准备完成调用创建方法
app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

然后先运行 vue 再运行 electron

npm run dev


npm run electron:dev

窗口显示 vue 的页面就代表成功了

四，其他配置

1，热更新工具

安装nodemon：

npm install nodemon -D

在 package.json 的 scripts 标签新增一条启动命令，监控文件改变，代码如下：

"electron": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue",

2，命令合并工具

每次都要运行 vue 再运行 electron 比较麻烦，因此我们安装一个命令合并运行的工具。安装 npm-run-all：

npm install npm-run-all -D

在 package.json 的 scripts 标签修改启动命令，代码如下：

"electron:dev": "npm-run-all --parallel dev electron"

再运行.

npm run electron:dev

就会同时运行 vue 和 electron

3，打包工具

安装 electron-builder 工具：

npm install electron-builder -D

在 package.json 的 scripts 标签新增一条打包命令，代码如下：

"electron:build": "vite build && electron-builder"

然后再在 package.json 新增打包的配置文件：


"build": {
    "productName": "electron-vue",
    "appId": "electron-vue",
    "asar": true,
    "directories": {
      "output": "dist_electron/${version}"
    },
    "files": [
      "dist",
      "electron"
    ],
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "mac": {
      "category": "your.app.category.type"
    },
    "win": {
      "icon": "./electron/log.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {}
  }

打包的时候会发现显示的空白，是因为我们 main.js 的地址还是 http://localhost:5173 ，我们要根据环境显示不同的地址：

const { app, BrowserWindow } = require("electron");
const path = require("path");

const createWindow = () => {
  const mainWin = new BrowserWindow({
    width: 1000,
    height: 800,
  });

  //将链接修改成我们运行Vue时的地址：http://localhost:5173
  //mainWin.loadFile(path.join(__dirname, "./index.html"));
  //mainWin.loadURL('http://localhost:5173')

  const env = app.isPackaged ? "production" : "development";
  const indexHtml = {
    development: "http://localhost:5173", // 开发环境
    production: path.join(__dirname, "../dist/index.html"), // 生产环境
  };

  mainWin.loadURL(indexHtml[env]);
};

// 准备完成调用创建方法
app.whenReady().then(() => {
  createWindow();
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

还需要配置以下vite，让vite打包后的静态资源能够以本地file协议访问：

mport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
 
export default defineConfig({
  plugins: [vue()],
  base:'./',
  manifest:true,  
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  optimizeDeps: {
    exclude: ['electron'], 
  }
})

运行打包：