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

Posted 2023-02-16

【中文标题】如何将 Vue 2 网站转换为 PWA 网络应用程序？

【英文标题】：How to convert Vue 2 web site to PWA wab app?

【发布时间】：2021-10-05 19:54:22

【问题描述】：

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

【参考方案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_URLservice-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