如何使你的vue桌面级软件程序具备autoUpdate功能？

是vue桌面软件具备自动更新的功能：

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#auto-update

1、npm install electron-updater

2、创建vue.config.js

内容如下：

module.exports = {
  // 基本路径
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  /*css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
   // 启用 CSS modules for all css / pre-processor files.
   modules: false
  },*/
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
•    // open: process.platform === 'darwin',
•    //将服务启动后默认打开浏览器
•    open: true,
•    host: '0.0.0.0',
•    port: 8080,
•    https: false,
•    hotOnly: false,
•    proxy: {// 设置代理
•      '/api': {
•        target: 'http://www.lzzyaf.com',
•        changeOrigin: true,
•        pathRewrite: {
•          '^/api': '/'
•        }
•      }
•    },
•    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
•    electronBuilder: {
•     builderOptions: {
•      publish: ['github']
•     }
•    }
   }
}

3、修改src/background.js文件，import要放在开头

...
+  import { autoUpdater } from "electron-updater"
...
​
if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
+   autoUpdater.checkForUpdatesAndNotify()
  }
...

4、设置GitHub Personal Access Token

Note: You will need a GitHub personal access token for this step. To get one, go to https://github.com/settings/tokens (opens new window)and click Generate new token.

In order for Electron Builder to upload a release to GitHub, you will need to make your token available by setting the GH_TOKEN env variable to your token:

On Linux/MacOS:

export GH_TOKEN=TOKEN-GOES-HERE

On Windows:

set GH_TOKEN=TOKEN-GOES-HERE

5、发布你的软件

npm run electron:build -- -p always

6、Publish Release

去github网站， 将草稿release掉；

7、Check for Updates

Install your app, then run it. You won't get an update notification yet, because this is the latest version. You will have to publish a new version by increasing the version field in your package.json, then repeating the 3 previous steps. Now, your old app should give you an update notification.

PS直接在后台就给你update好了。不需要点击允许啥的。强大！