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

Question

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

Answer 1

有一个 Vue.js 插件，here。如果不：创建一个services 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);

Answer 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)
    }
  })
}

第三：制作服务-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####################

Answer 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

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

How to convert Vue 2 web site to PWA wab app?

javascript

node.js

vue.js

progressive-web-apps

vuejs2