最近在应用vue我的项目时看到一个这样的成果，如图：


当初其实有很多网站都反对把网页装置到电脑或手机（IOS Safari反对较好），如下图装置后的成果：

这些都是网页利用。

接下来介绍一下如何让你的vue2我的项目变得能够装置。

增加cli-plugin-pwa

给现有的vue我的项目增加，应用上面命令：

vue add pwa

执行完之后会主动在package.json增加"@vue/cli-plugin-pwa"，"register-service-worker" 依赖。

并且在我的项目src目录下生成registerServiceWorker.js和service-worker.js文件：

// registerServiceWorker.js/* eslint-disable no-console */import { register } from 'register-service-worker'if (process.env.NODE_ENV === 'production') {  register(`${process.env.BASE_URL}service-worker.js`, {    ready () {      console.log(        'App is being served from cache by a service worker.\n' +        'For more details, visit https://goo.gl/AFskqB'      )    },    registered () {      console.log('Service worker has been registered.')    },    cached () {      console.log('Content has been cached for offline use.')    },    updatefound () {      console.log('New content is downloading.')    },    updated () {      console.log('New content is available; please refresh.')    },    offline () {      console.log('No internet connection found. App is running in offline mode.')    },    error (error) {      console.error('Error during service worker registration:', error)    }  })}
// service-worker.js 略有改变 以你本人的为准// install new service worker when ok, then reload page.self.addEventListener("message", msg => {  if (msg.data && msg.data.type === 'SKIP_WAITING'){      self.skipWaiting()  }})

而且还会在public/img/icons下生成实用于个平台装置的默认图标，能够本人生成替换即可。

而后须要手动在main.js引入 registerServiceWorker.js

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './registerServiceWorker'Vue.config.productionTip = falsenew Vue({  router,  store,  render: h => h(App)}).$mount('#app')

最初到vue.config.js中增加相干配置：

module.exports = {    pwa: {        name: "My App",        themeColor: "#000000",        msTileColor: "#000000",        appleMobileWebAppCapable: "yes",        appleMobileWebAppStatusBarStyle: "black",        assetsVersion: "1.2",        iconPaths: {          favicon32: "img/icons/favicon-32x32.png",          favicon16: "img/icons/favicon-16x16.png",          appleTouchIcon: "img/icons/apple-touch-icon.png",          maskIcon: "img/icons/safari-pinned-tab.svg",          msTileImage: "img/icons/msapplication-icon-144x144.png",        },        manifestOptions: {          icons: [              {                  src: "./img/icons/android-chrome-192x192.png",                  sizes: "192x192",                  type: "image/png",              },              {                  src: "./img/icons/android-chrome-256x256.png",                  sizes: "256x256",                  type: "image/png",              },              {                  src: "./img/icons/apple-touch-icon.png",                  sizes: "120x120",                  type: "image/png",              }          ],        },        workboxPluginMode: "InjectManifest",        workboxOptions: {            swSrc: "src/service-worker.js"        },      },}

这样从新把我的项目部署后，刷新页面后你的网站地址栏曾经呈现可装置的图标。

在这个根底上，能够解决一个spa我的项目的一个痛点，就是每次重新部署后客户端缓存问题，通过service worker能够提醒用户有新的可用版本。如果感兴趣能够查看上面的链接

vue我的项目部署后提醒用户有新版本