共计 2388 个字符,预计需要花费 6 分钟才能阅读完成。
最近在应用 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 = false
new 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 我的项目部署后提醒用户有新版本
正文完