electron-vue编写上位机

最新推荐文章于 2025-10-13 08:03:25 发布

原创最新推荐文章于 2025-10-13 08:03:25 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#electron #electron-vue #上位机

硬件专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Vue CLI和simulatedgreg/electron-vue模板快速搭建Electron-Vue应用，并解决运行过程中遇到的问题，包括配置index.ejs文件以避免错误提示，以及解决serialport模块安装时出现的依赖问题。

启动框架

npm install -g vue-cli  
vue init simulatedgreg/electron-vue ele-vue
cd myapp
npm install
npm run dev

一路next完成，其中 electron-packager 用于制作简单的可执行文件，electron-builder用于制作完整功能的程序。

问题：

运行后打开窗口后提示报错，修改 index.ejs文件

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <meta charset="utf-8">
    <title>vest</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body style="height:100%">
    <div id="app" style="height:100%"></div>
    <!-- Set `__static` path to static files in production -->
    <%  if (!require('process').browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

serial port安装

执行


npm install -g node-gyp

npm install --global --production windows-build-tools

第二个安装报错，解决方式直接到下图路径中手动安装这两个程序(需要联网)
在这里插入图片描述
设置npm环境变量

npm config set python python2.7 

npm config set msvs_version 2017

npm config set python C:\Python27（指定python2的路径）

vuex dipatch不起作用

参考 https://zhuanlan.zhihu.com/p/66244402 解决，我用的是方法一，方法二没有效果

未完待续