如何将 Vue 2 网站转换为 PWA 网络应用程序？答案

【问题标题】：How to convert Vue 2 web site to PWA wab app?如何将 Vue 2 网站转换为 PWA 网络应用程序？
【发布时间】：2021-10-05 19:54:22
【问题描述】：

我在使用 vue 3 时检查了 PWA 功能，但在 vue 2 中没有。所以如果你有从 vue 2 项目转换为 pwa 的好主意，请分享。谢谢。

【问题讨论】：

标签： javascript node.js vue.js vuejs2 progressive-web-apps

【解决方案1】：

有一个 Vue.js 插件，here。如果不：创建一个service worker，你可以介绍给它here 添加您选择的 webmanifest 或 manifest.json，阅读here

将 express 作为依赖添加到您的项目中

创建 server.js 类文件，并使用 express 从服务器提供构建的 Vue 应用程序

// server.js ex:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
  return res.send('ping');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html')); //serving build folder
});
app.listen(port);

【讨论】：

【解决方案2】：

我找到了问题的答案。我会分享给所有开发者。

首先，我已经按照这个 vue/cli-plugin-pwa

第二：使用以下代码制作 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'
      )
    },
    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：

// inside src/service-worker.js 

// define a prefix for your cache names. It is recommended to use your project name
workbox.core.setCacheNameDetails({prefix:  "simple-vue-project"});

// Start of Precaching##########################
// __precacheManifest is the list of resources you want to precache. This list will be generated and imported automatically by workbox during build time
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
// End of Precaching############################

// Start of CachFirst Strategy##################
// all the api request which matchs the following pattern will use CacheFirst strategy for caching
workbox.routing.registerRoute(
/http:\/\/get\.geojs\.io\/v1\/ip\/country\.json/,
new  workbox.strategies.CacheFirst()
);
// End of CachFirst Strategy####################

【讨论】：

【解决方案3】：

现代的@vue/cli 为您提供了在构建 Vue 2 和 Vue 3 项目时启用 PWA 的选项。看看这个documentation。

如果您已经创建了项目，CLI 提供了一个名为 Vue UI 的新功能。只需在 cmd 中输入vue ui，它就会打开 Vue UI，您可以在其中使用图形界面重新配置您的项目。

如果您有兴趣学习 Vue JS，请查看这些课程 - Complete Vue JS Course、Vue 3 Essentials

【讨论】：