Electron-vue项目实现注册登录功能的桌面开发程序最适合新人学习的详细教程

缺乏、安全感 2022-12-10 07:04 277阅读 0赞

### 前期背景 ###

项目周期：2020.09.24-2020.09.29

使用的框架：Electron  springboot

最终目的：做一个简易版的qq聊天的桌面软件

--------------------

### 准备工作 ###

1、安装node、配置node环境

2、安装vscode

3、安装vue-cli脚手架

以上三个步骤如果不会，可以看这个教程   [https://blog.csdn.net/qq\_37591637/article/details/89944336][https_blog.csdn.net_qq_37591637_article_details_89944336]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

4、安装Electron

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

5、初始化一个vue与Electron一身的项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

--------------------

项目初始化模板成功以后，打开文件夹，进行npm install 安装必须的模块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

等待这个项目所需安装模块都安装完毕以后，我们启动项目

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6][]

但是报错  process is not defined

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7][]

###  解决办法 ###

修改你项目文件下`.electron-vue`里面的`webpack.renderer.config.js`和`webpack.web.config.js`

`添加一段这个代码`

//加一些参数配置
          templateParameters(compilation, assets, options) {
            return {
              compilation: compilation,
              webpack: compilation.getStats().toJson(),
              webpackConfig: compilation.options,
              htmlWebpackPlugin: {
                files: assets,
                options: options
              },
              process,
            };
          },
          //加一些参数配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8][]

整体的代码是这样的

new HtmlWebpackPlugin({
          filename: 'index.html',
          template: path.resolve(__dirname, '../src/index.ejs'),
          //加一些参数配置
          templateParameters(compilation, assets, options) {
            return {
              compilation: compilation,
              webpack: compilation.getStats().toJson(),
              webpackConfig: compilation.options,
              htmlWebpackPlugin: {
                files: assets,
                options: options
              },
              process,
            };
          },
          //加一些参数配置
          minify: {
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeComments: true
          },
          nodeModules: false
        }),

记住，两个文件的相同位置都要添加这个代码

然后保存，在控制台输入npm run dev

出现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9][]

## ##

--------------------

###  第二部分、制作一个简约的页面，实现数据的前后交互 ###

**1、前端页面精美的库    element-ui库(html的)**

cnpm install --save element-ui

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10][]

**2、  安装sass库(css的)**

cnpm install --save-dev node-sass
    cnpm install --save-dev sass-loader

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11][]

**在main.js里面加入全局变量的引用**

//添加element-ui组件
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    //添加element-ui组件

**3、安装axios，用于调用http请求  一般在开始运行项目的时候npm install 就已经安装过了**

--------------------

这个时候，简单快速的布出精美的页面，就需要element-ui了

[打开官网      https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 12][]

--------------------

我们先布局出一个登陆 注册的页面出来

打开element-ui这个组件网，选择我们需要的零件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 13][]

这里有代码，也可以在线运行，我们把代码改成我们需要的，再复制到我们的项目里面来；

> ### 问题、代码灰色，没有高亮 ###

但是我发现我项目里面的代码都是灰色的，没有高亮！

是因为没有安装vetur的缘故

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 14][]

选择vscode左侧的最下面的那个图标，输入Vetur   因为我一打开就有，直接点击install就可以了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 15][]

安装成功以后，就没有绿色的install的按钮了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 16][]

现在重启这个软件，不重启也可以；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 17][]

代码已经高亮了！

--------------------

我们写代码主要是在renderer文件夹的components里面新建vue文件，布局的

所以打开项目中vue文件（出了App.vue外），把原有的代码全部清除，只留下基本的标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 18][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 19][]

之所以留下一些注释的东西，是因为引导，我们如果需要在一个组件里面引入另一个组件的书写方式 ；

忘了说，一个vue文件就是一个组件

--------------------

> ### 开始布局 ###

我在element-ui官网找到表单，然后在在线运行里面更改成我需要的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 20][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 21][]

然后拷贝相关的代码在vue组件里面

<template>
    <div id="app">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
       <el-form-item label="密码">
        <el-input v-model="form.pass"></el-input>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">立即登陆</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    
    </div>
    </template>
    
    <script>
     // import 其他vue组件的名称 from './LandingPage/其他vue组件的名称'
      export default {
        name: 'landing-page',
        data(){
          return{
             form: {
              name: '',
              pass:'',
            }
          }
        },
       //导入其他的组件 components: { SystemInformation },
        methods: {
        onSubmit() {
            console.log('submit!');
          }
        }
      }
    </script>
    
    <style>
      
    </style>

运行项目 npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 22][]

是不是出来了呢？

而且，最方便的是，如果你代码有问题，不用终止项目，直接搞好保存就可以了，界面自动刷新！

--------------------

*我们现在要做的是*

*1、再美化页面 添加一个注册的页面*

*2、与后端以及数据库进行交互 实现登陆的功能（我用的语言是java  采用的是springboot框架）*

*3、打包前后端项目为桌面程序，安装看看（不需要jdk安装环境的exe程序）*

--------------------

> ### 美化页面  添加注册页面 ###

这里涉及到多个路由文件的配置。index.js是主路由，但是随着项目的增大，以及方便管理，需要子路由文件；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 23][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 24][]

路由之间的跳转

注册页面有一个登陆的按钮，点击登陆按钮就会跳转到login.vue文件里面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 25][]

用   <router-link :to="\{path:'这里是路由文件里面的路径'\}"> </router-link>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 26][]

现在要解决跨域问题

点击注册，登陆按钮，然后把值通过axios给后端，由于端口不同，项目名称不同，存在着跨域

我的后端是idea软件springboot项目

--------------------

> ### electron-vue项目跨域设置 ###

在dev-runner.js里面添加跨域设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 27][]

/*
             这里是跨域设置
            */
           proxy: {
            '/api': {
              // 请求的目标服务器地址
              target: 'http://localhost:8080/',
              // 如果是https接口，需要配置这个参数
              secure: false,
              // 设置允许跨域
              changeOrigin: true,
              // 重写路径
              pathRewrite: {
                '^/api': ''
              },
              headers: {
                referer: ''
              }
            }
          },
           //这里是跨域设置

是http不是https

我就是因为这里写错了，所以一直报错  HTTP method names must be tokens

在main.js里面全局设置axios

***注意如果这里是axios，在其他的vue文件里面使用就是axios；如果是$axios的话，其他文件里面就是$axios；***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 28][]

###  进行跨域请求 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 29][]

onSubmit() {
           //跨平台交互
           // 发送一个 POST 请求
         this.$axios({
       method: 'post',
       url: '/api/user/insert/',
       header:{
            'Content-Type':'application/json'  //如果写成contentType会报错
        },
        data: {
        username: 'Fred',
        password: 'Flintstone',
        tell:'17356286023'
      },
      }).then((res) => {
      console.log(res)
    });
           //跨平台交互
          }
        }

后端是springboot

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 30][]

@RequestMapping("/insert")
        public String adduser(@RequestBody String juser) throws JSONException {
            //把字符串变成Json对象
            System.out.println("接受到的数据是:"+juser);
            JSONObject jo=new JSONObject(juser);
            user u=new user();
            u.setPassword(jo.getString("password"));
            u.setTell(jo.getString("tell"));
            u.setUsername(jo.getString("username"));
            int i=us.insert(u);
            return "index";
        }

我们现在运行项目，看一下，是否能注册成功

![20200928100235875.gif][]

哈哈哈，现在整个流程都跑通了.....

--------------------

**现在普及一个关于jsonobject jsonarray  以及表单数据 前后端如何发送与接受**

上面我axios发送的是json数据，准确来说是jsonobject数据，后端用(@RequestBody String juser)接受的

### 1、axios发送一个json数组，后端的接受 ###

this.$axios({
       method: 'post',
       url: '/api/user/insert/',
       header:{
            'Content-Type':'application/json'  //如果写成contentType会报错
        },
        data:[{username:'简雍',password:'111',tell:'110'},{username:'糜竺',password:'123',tell:'119'},"true","蜀国初期人员"],
      }).then((res) => {
      console.log(res)
    });
           //跨平台交互

@RequestMapping("/insert")
        public String adduser(@RequestBody String juser) throws JSONException {
            JSONArray ja=new JSONArray(juser);
            JSONObject JO=ja.getJSONObject(0);
            System.out.println(JO.get("username")+"-"+JO.get("password")+"-"+JO.get("tell"));
            JSONObject JO1=ja.getJSONObject(1);
            System.out.println(JO1.get("username")+"-"+JO1.get("password")+"-"+JO1.get("tell"));
            System.out.println(ja.get(2));
            System.out.println(ja.get(3));
    }

![20200928101819289.gif][]

2、axios发送一个表单数据，后端的接受

// 发送一个 POST 请求
         this.$axios({
       method: 'post',
       url: '/api/user/insert/',
       header:{
            'Content-Type':'application/x-www-form-urlencoded'  //如果写成contentType会报错
        },
        data:this.qs.stringify({username:'刘备',password:'999',tell:'12365897452'}),
      }).then((res) => {
      console.log(res)
    });
           //跨平台交互

@RequestMapping("/insert")
        public String adduser(@RequestParam String username,@RequestParam String password,@RequestParam String tell) throws JSONException {
            //把字符串变成Json对象
            System.out.println("---------"+username+"-----"+password+"-----"+tell);
    }

![20200928103832664.png][]

### 总结 ###

如果是json数据，不管是json数组还是json对象，axios中要设置 'Content-Type':'application/json',并且不需要qs转换；

后端用@RequestBody String juser 接受，然后转换为原本的类型，如json对象或json数组；

如果是单纯的键值对   'Content-Type':'application/x-www-form-urlencoded'，用qs转换一下，然后在后端用

@RequestParam  一模一样的属性名称接受

如果json对象与json数组不懂的，可以看这个详细的教程案例

[https://blog.csdn.net/qq\_37591637/article/details/90319229][https_blog.csdn.net_qq_37591637_article_details_90319229]

--------------------

### 实现动态的注册、登陆功能 ###

reg.vue

<template>
    <div id="app">
      <el-form  :model="form" label-width="50px" class="mc"> 
      <el-form-item >
        <el-input v-model="form.name" placeholder="用户名/手机号码"></el-input>
      </el-form-item>
       <el-form-item >
        <el-input v-model="form.pass" placeholder="密码"></el-input>
      </el-form-item>
         <el-form-item >
        <el-input v-model="form.tell" placeholder="手机号码"></el-input>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">立即注册</el-button>
        <router-link :to="{path:'/'}"><el-button>登陆</el-button></router-link>
      </el-form-item>
    </el-form>
    </div>
    </template>
    
    <script>
     // import 其他vue组件的名称 from './LandingPage/其他vue组件的名称'
      export default {
        name: 'landing-page',
        data(){
          return{
             form: {
              name: '',
              pass:'',
              tell:''
            }
          }
        },
       //导入其他的组件 components: { SystemInformation },
        methods: {
        onSubmit() {
           //跨平台交互
           // 发送一个 POST 请求
           console.log(this.form.name);
         this.$axios({
       method: 'post',
       url: '/api/user/insert/',
       header:{
            'Content-Type':'application/x-www-form-urlencoded'  //如果写成contentType会报错
        },
        data:this.qs.stringify({username:this.form.name,password:this.form.pass,tell:this.form.tell}),
      }).then((res) => {
      console.log(res)
    });
           //跨平台交互
          }
        }
      }
    </script>
    
    <style>
     /* #app{
      background-image: url('~@/assets/img/bg1.jpg');
    }  */
      .mc{
        padding-top: 110px;
        padding-left: 552px;
        width: 400px;
    }
    </style>

<template>
    <div id="app">
      <el-form  :model="form" label-width="50px" class="mc"> 
      <el-form-item >
        <el-input v-model="form.name" placeholder="用户名/手机号码"></el-input>
      </el-form-item>
       <el-form-item >
        <el-input v-model="form.pass" placeholder="密码"></el-input>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">立即登陆</el-button>
        <router-link :to="{path:'/user/reg'}"><el-button>注册</el-button></router-link>
      </el-form-item>
    </el-form>
    </div>
    </template>
    <script>
    //import router;
     // import 其他vue组件的名称 from './LandingPage/其他vue组件的名称'
      export default {
        name: 'landing-page',
        data(){
          return{
             form: {
              name: '',
              pass:'',
            }
          }
        },
       //导入其他的组件 components: { SystemInformation },
        methods: {
        onSubmit() {
           this.$axios({
           method: 'post',
           url: '/api/user/qby/',
          header:{
            'Content-Type':'application/x-www-form-urlencoded'  //如果写成contentType会报错
        },
        data:this.qs.stringify({name:this.form.name,pass:this.form.pass}),
           }).then((res) => {
      console.log(res);
      if(res.data=="success"){
        //跳转页面
        alert("登陆成功");
      }else{
       // 不跳转
       alert("用户名或密码错误");
      }
    });
    
        },
         
        }
      }
    </script>
    
    <style>
     /*
    #app{
     background-image: url('~@/assets/img/bg1.jpg'); 
    }
    */
      .img{
        position: absolute;
        width:100%;
        height:40rem;
      }
      .mc{
        padding-top: 110px;
        padding-left: 552px;
        width: 400px;
    }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 31][]

效果如下

![20200928111515862.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 32][]

### 给页面添加背景图片 ###

图片放在assets文件夹下面img文件夹下面

写法是 <img src="~@/assets/img/bj1.jpg"  />

用~@/表示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 33][]

### 部署项目 ###

1、把electron-vue项目进行打包

控制台输出npm run build

但是报错

![20200928121359883.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 34][]

安装electron-builder

yarn add electron-builder --dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 35][]

再次在控制台输入yarn run build

又报错了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 36][]

解决方案

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

yarn add babel-plugin-syntax-dynamic-import

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 37][]

打开webpack.main.config.js里面修改以下的内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 38][]

{
            test: /\.js$/,
            loader:'babel-loader',
            options:{
           plugins:['syntax-dynamic-import']
          },
          },

把子路由的配置改成这样的；

import login  from '@/components/user/login.vue'
    import reg  from '@/components/user/reg.vue'
    export default[
        {
            path: '/',
            name: 'login',
            component:login,
        },
        {
            path: '/user/reg',
            name:'reg',
            component:reg,
        }
    ];

先运行项目，yarn run dev

如果正常就继续，如果不正常的话，**报错**  vue- Couldn't find preset "es2015" relative to directory

**解决办法  yarn add** babel-preset-es2015 --save-dev

再次运行项目 yarn run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 39][]

失败的原因是下载的时间太长了导致的

> ### electron-vue项目打包成桌面开发程序的流程 ###

***1、下载SHASUMS256.txt与electron-v2.0.18-win32-x64.zip***

现在打开链接，然后再浏览器上下载，再放到缓存里面

[https://npm.taobao.org/mirrors/electron/2.0.18/][https_npm.taobao.org_mirrors_electron_2.0.18]

[记住][https_npm.taobao.org_mirrors_electron_2.0.18]SHASUMS256.txt 也要下载 可以新建一个txt文件，然后复制内容进去保存

将SHASUMS256.txt改成SHASUMS256.txt-2.0.18

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 40][]

![2020092814303960.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 41][]

***2、下载[winCodeSign-2.6.0][]***

***不同的环境变量的项目所需要的版本不一样，你可以通过[yarn run build  ,当程序卡住的时候，仔细看一下提示，需要什么版本的；当然其他版本的不影响，你下载下来，只需要改文件夹的名称就可以了，但是你必须知道你的版本是什么。][winCodeSign-2.6.0]***

下载[winCodeSign-2.6.0（至于版本，你们可以yarn run build  到某个地方就会卡住，你们看看是提示是什么版本的）][winCodeSign-2.6.0]

[https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.6.0][winCodeSign-2.6.0]

如果版本是2.7 就更改网页最后的版本号就可以了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 42][]

下载结束以后，在Cache里面新建一个winCodeSign的文件夹，记住这个名字不能改

在这个winCodeSign文件夹里面新建一个winCodeSign-你的版本的名称，如果是2.6.0.7就去前面2个点.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 43][]

拷贝刚才下载的文件里面的这几个东西

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 44][]

然后再yarn run build

如果发现又卡住下载东西，仔细看是什么，如果还是winCodeSign，说明你以上的配置不对！！！

仔细看文件名称以及版本号；

如果你下错了winCodeSign版本没有关系，一样可以用，里面内容一样的，要把文件夹名称改成你需要的就可以了！！

--------------------

***3、下载nsis***

如果是nsis的话，就继续往下看

下载nsis-3.0.3.2

[https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.3.2][https_github.com_electron-userland_electron-builder-binaries_releases_tag_nsis-3.0.3.2]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 45][]

在Cache文件夹里面新建一个文件夹nsis

在文件夹nsis里面新建一个文件夹nsis-版本号

我需要的是nsis-3.0.4.1  ，但是不影响，因为虽然版本不一样，但是里面内容一样，文件夹名称与需要的一样就可以了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 46][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 47][]

现在运行yarn run build  就没有问题了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 48][]

在build文件夹里面有生成的.exe程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 49][]

把exe程序放在桌面上，关闭vscode

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 50][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 51][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 52][]

### **当打包结束以后，运行界面没有问题。但是axios请求报错！！！！** ###

### **原因：proxy配置的跨域设置只适合开发环境，不适合上线的环境（以及打包的项目）** ###

**有两个方法可以解决这个问题**

> **方法一、如果你是electron是v10.\*.\*版本的话，可以用这个方法**

![20200929114951569.png][]

1.1、删除掉proxy代理,那个只是开发环境下面使用的跨域设置，没有用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 53][]

1.2、打开main文件夹下面的index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 54][]

找到mainWindow = new BrowserWindow(\{\}) 添加跨域设置 webPreferences:\{webSecurity:false\}

mainWindow = new BrowserWindow({
    
        height: 563,
    
        useContentSize: true,
    
        width: 1000,
    
        //跨域设置
    
        webPreferences:{webSecurity:false}
    
        //跨域设置
    
      })

再在下面添加

//跨域
    
    app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors');
    
    //跨域

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 55][]

在axios请求的方法里面把url改成绝对路径

this.$axios({
       method: 'post',
       url: 'http://185.92.156.173:8088/user/insert/',
       header:{
            'Content-Type':'application/x-www-form-urlencoded'  //如果写成contentType会报错
        },
        data:this.qs.stringify({username:this.form.name,password:this.form.pass,tell:this.form.tell}),
      }).then((res) => {
      console.log(res)
    });

然后保存，打包，就可以了

前提是你的electron是v10版本以上的，不然没用。

**我亲自测试了，把这个exe程序放在其他没有这些环境变量的电脑上都可以，有效！（前提你的后端是能访问到的，云服务器）**

--------------------

> **方法二、nginx反向代理（最普遍的方法）**

1、安装nginx

官网地址 http://nginx.org/download/nginx-1.0.11.zip

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 56][]

2、解压后，把文件放在想要的地方

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 57][]

打开文件夹，双击 nginx.exe，就是启动了；

但是我双击了以后闪退了，原因是80端口被占用了；

修改conf/nginx.conf文件中的 端口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 58][]

我改成了8090 ,保存然后再双击试试看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 59][]

是不是一闪而过，都看不到窗口，我就是的。

我改了好几次，但是还是一闪而退，百度了很多，**不需要配置环境变量，不需要的**；

后来，我打开了任务管理器，发现很多的nginx.exe在运行。我没有关闭

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 60][]

全部关闭以后，在双击（即使还是一闪而过，别怕），在页面上输入localhost:8085(你在配置文件里面设置的端口号)，我改了很多，最后是8085端口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 61][]

居然能打开，没问题，我都崩溃了.............我还以为跟tomcat一样呢？

经过几个小时的尝试，告诉大家一个很重要的技巧

1、想要知道nginx服务有没有开启，打开任务管理器

有两个nginx是对的；想要关闭的话，可以直接点击关闭进程，两个

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 62][]

用谷歌浏览器，我用了火狐浏览器，很快的修改配置参数，火狐浏览器都反应不过来，我都不知道究竟是对是错

打开ngnix的nginx.conf配置文件

#user  nobody;
    worker_processes  1;
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    #pid        logs/nginx.pid;
    events {
        worker_connections  1024;
    }
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
       
        keepalive_timeout  65;
    
       upstream domi{
        server 182.96.153.143:8088;
                             }
        server {
            listen       8085;
            server_name  localhost;
            location / {
                root   html;
                index  index.html index.htm;
            }
           location /ttt/ {
                proxy_pass http://domi/;
           }
    
           error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    
    }

要点：

1、申明另一个服务器的地址以及端口

upstream domi\{

server 182.92.153.173:8088;

并且 不能有\_  可以是domi 可以是yyy 不能是e\_p

2、proxy\_pass 里面要与这个申明的服务器名称一致

3、先访问ngnix是否没问题  比如ngnix的地址是http://localhost:8085

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 63][]

那么在后面网址加上ttt就可以了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 64][]

4、然后再electron-vue项目里面，axios请求的地址设置为http://ngnix的访问地址/ttt

若在本机电脑上：http://localhost:8085/ttt/

若后端服务器与ngnix在阿里云上:http://阿里云地址:8085/ttt/

不管你在哪里，记住，你的(ngnix的地址:端口号)/ttt/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 65][]

当然，如果采用ngnix反向代理跨域，就可以注释掉方法一的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 66][]

然后再进行yarn run build就可以了

我试过了可以注册登录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 67][]

--------------------

您的支持是我分享经验的动力

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 68][]

[https_blog.csdn.net_qq_37591637_article_details_89944336]: https://blog.csdn.net/qq_37591637/article/details/89944336
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20221123/b9d778da586e4f4787c4402943ac84f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20221123/36ef675207904ab3a697d4de2b05cc5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20221123/9cf103e8a7b7434a9a68c02f5235600e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20221123/5a9bdb5a3a1b4246a0b6d6b65c2f6deb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20221123/6dc92d91ecec4a91b9bef4288d1a095a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20221123/b99cc88531e9409ba4cfe42222f32b18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6]: /images/20221123/534209677cdf44fe94120d8318f629e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7]: /images/20221123/809dbbe86e1d4eadb91c3f7c9cdd5d74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8]: /images/20221123/f9ad6f5b9d53423da14e37d5e6c4452b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9]: /images/20221123/73b6e98fccf8441796beae7b2a878811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10]: /images/20221123/5842ae67cbf1454facd12fc4e642fa91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11]: /images/20221123/371974b26f724f22953585a5f24977c9.png
[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 12]: /images/20221123/3c200add201c4cff84956d0d03169127.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 13]: /images/20221123/0143730d7db74027b815dc71082676a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 14]: /images/20221123/baa2c368397740f8a981cc4bd026ffe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 15]: /images/20221123/f21cda88de024b1abe7ef136ff26efe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 16]: /images/20221123/9e7df655745c48fbb80be9b37cf16378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 17]: /images/20221123/1dfa6f7a115a47e7936737f14d7ab702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 18]: /images/20221123/6192eab68aa0406eb08a80968964dbe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 19]: /images/20221123/82390d3964004a048c62c4ecb6589dbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200925111023513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 21]: /images/20221123/58151ed76e824765801b4edc8a5431ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 22]: /images/20221123/e16f833de7db47ed9af2d0a443621b6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 23]: /images/20221123/1399420e57a2456db9053e3fdba2bf55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 24]: /images/20221123/0acea0e5a9d347e08f0339b754cde1ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 25]: /images/20221123/8e0f510dfaab4b6d9f258a5527b9a1b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 26]: /images/20221123/9d9816745bb34fdf8336d36ebd78a693.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 27]: /images/20221123/b3260af6c42149f79c38c860dbb71138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 28]: /images/20221123/7459447ae8cf42819f696c13d0329712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 29]: /images/20221123/cf522af08cad4cfc83b98d39bc0ffb58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 30]: /images/20221123/b5b319b5bcdd4a0789ea4964e6cc7437.png
[20200928100235875.gif]: /images/20221123/9e1789fa3d3f443f9f2ee660eb0a3173.png
[20200928101819289.gif]: /images/20221123/731067029747486ca07112c5aa4b8935.png
[20200928103832664.png]: /images/20221123/d13b68d947c14e93a1cc15a4d94a9547.png
[https_blog.csdn.net_qq_37591637_article_details_90319229]: https://blog.csdn.net/qq_37591637/article/details/90319229
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 31]: /images/20221123/71387307f1394af590b03b5803b9ad4c.png
[20200928111515862.gif]: /images/20221123/ebb380ced2d64e8c82dcbcb6068c08c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 32]: /images/20221123/bdddf5f778f644fbabb4cb7abd8c65b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 33]: /images/20221123/a6afbdd462fa4be59403c621cad31afb.png
[20200928121359883.png]: /images/20221123/0e31a4dc072a436f8713d4b07aaa2ec5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 34]: /images/20221123/35fa771cd64d4f188537728bb29d110f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 35]: /images/20221123/3e5251096ecd44dd8da7611f9609a09a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 36]: /images/20221123/eb43cb9b68d04bbe9eb68d552f9ac6a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 37]: /images/20221123/14ddc0880f584f649af3b067d9908514.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 38]: /images/20221123/e23e3918629f4caebc098e408b9ac11f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 39]: /images/20221123/a80aec9c1feb45dcbe35cf1966df77a7.png
[https_npm.taobao.org_mirrors_electron_2.0.18]: https://npm.taobao.org/mirrors/electron/2.0.18/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 40]: /images/20221123/7c952790eea44eaf8c94022b6f96de8f.png
[2020092814303960.png]: /images/20221123/aeab93929ab64dc08435890721f3b855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 41]: /images/20221123/f2a6dac99226463383d0475a193d2134.png
[winCodeSign-2.6.0]: https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.4.0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 42]: /images/20221123/59cb70acdeff4653a53f7ffda8b12847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 43]: /images/20221123/0cd30a58599748a7a89487732debe13d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 44]: /images/20221123/6d297e549cd144c5bc19f36c7fc69255.png
[https_github.com_electron-userland_electron-builder-binaries_releases_tag_nsis-3.0.3.2]: https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.3.2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 45]: /images/20221123/207fa13cdba44c8eac7dd0e4885b3200.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 46]: /images/20221123/a8b8f907b2634f49a61f0f590d0daefa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 47]: /images/20221123/643873f4374e4b83bfa916e518cb4cb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 48]: /images/20221123/9c25a6fa559442a8bf40b323b7fc5600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 49]: /images/20221123/df55080c1cc94cbf8cbe749fc907b1d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 50]: https://img-blog.csdnimg.cn/20200928165600800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 51]: /images/20221123/82326a0c6b97498bac1ec4e401e4054a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 52]: /images/20221123/6f995e61803b42c8bc70abcb990f42a8.png
[20200929114951569.png]: /images/20221123/4a63d474b6d24d50be8fd10520a9de75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 53]: /images/20221123/11ae2618295f45cbb53cb227de3fc782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 54]: /images/20221123/ac36986c0e9f4875bb63f4ca2499726e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 55]: /images/20221123/e30f03e67ac444148ceede50981cc8ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 56]: /images/20221123/45afbad5e45e49a4ae9c4ee07d9583a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 57]: /images/20221123/a4c9acc4eff1465db1745285400ae64a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 58]: /images/20221123/06b9dab437274604b3aa7c82a9772764.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 59]: /images/20221123/66f4dee4dc10441aa26ad181d120cd6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 60]: /images/20221123/1462fe61c43a4b98bd568845f69a0cd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 61]: /images/20221123/65cb86e082d84da6a96371be2bf8c22a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 62]: /images/20221123/53b5dc47062645aea706b479a4b5d18c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 63]: /images/20221123/6578ca11e4634b4fa1fe0b872885530a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 64]: /images/20221123/0da74e729b6d43708b8778e8883e56e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 65]: /images/20221123/4cf97de6624a46fc9b599c890f53b7a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 66]: /images/20221123/ec574148b6294d2093ca3d34cc89b30b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 67]: /images/20221123/04970a2d3d7242599dcf249fd9c00b24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 68]: /images/20221123/61f03f1453664a289915c77e91c56937.png