如何为非Vue CLI创建的Vue.js 3项目添加PWA功能？

直接给你结论：你没法用vue add pwa命令给非Vue CLI创建的项目添加PWA支持。这个命令是专门为Vue CLI生成的项目设计的——它会自动修改Vue CLI专属的配置文件（比如vue.config.js）、注入CLI预设的构建逻辑，而你的项目是从零搭建的Webpack5项目，没有这些CLI预设的结构，执行这个命令大概率会报错或者完全无效。

所以你需要手动配置PWA，下面是具体的实操步骤（Vue CLI的PWA插件本质也是基于Workbox实现的，我们直接用Webpack官方推荐的Workbox工具链来配置）：

1. 安装必要依赖 #

首先安装Workbox的Webpack插件，这是Webpack生态中最成熟的PWA解决方案：

npm install workbox-webpack-plugin --save-dev

确保你的项目已经正确安装了vue@3.x和Webpack 5相关依赖。

2. 配置Webpack的Workbox插件 #

在你的webpack.config.js文件中，引入并配置Workbox插件，这里提供两种常用模式：

模式一：自动生成Service Worker（适合简单场景） #

使用GenerateSW插件，它会自动生成基础的service worker文件，帮你处理静态资源缓存、离线访问等基础需求：

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  // 你的其他Webpack配置（入口、输出、loader等）...
  plugins: [
    // 其他已配置的插件...
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      // 可按需添加自定义配置：比如排除不需要缓存的文件、设置缓存过期时间等
    })
  ]
};

模式二：自定义Service Worker（适合复杂需求） #

如果你需要更灵活的控制（比如自定义缓存策略、实现推送通知、处理后台同步等），可以用InjectManifest插件，自己编写service worker文件：

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  // 你的其他Webpack配置...
  plugins: [
    // 其他已配置的插件...
    new InjectManifest({
      swSrc: './src/service-worker.js', // 你的自定义service worker文件路径
      swDest: 'service-worker.js',
      clientsClaim: true,
      skipWaiting: true
    })
  ]
};

然后在src/service-worker.js里编写自定义逻辑，示例如下：

import { precacheAndRoute } from 'workbox-precaching';

// 预缓存Webpack打包生成的静态资源
precacheAndRoute(self.__WB_MANIFEST);

// 可添加自定义缓存策略、消息监听等逻辑
// 比如：缓存API请求
// import { registerRoute } from 'workbox-routing';
// import { StaleWhileRevalidate } from 'workbox-strategies';
// registerRoute(
//   ({ url }) => url.pathname.startsWith('/api/'),
//   new StaleWhileRevalidate()
// );

3. 添加Web App Manifest #

在项目的静态资源目录（比如public）下创建manifest.json文件，配置PWA的基础信息（这是让浏览器识别为可安装应用的核心文件）：

{
  "name": "你的Vue PWA应用",
  "short_name": "Vue PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#41b883",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

然后在你的index.html中引入这个manifest：

<link rel="manifest" href="/manifest.json">
<!-- 可选：添加iOS适配的启动图标和状态栏样式 -->
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
<meta name="apple-mobile-web-app-status-bar-style" content="#41b883">

4. 在Vue项目中注册Service Worker #

在你的Vue入口文件（比如src/main.js）中，添加注册service worker的逻辑，注意只在生产环境执行（开发环境不需要离线缓存）：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

// 注册Service Worker
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker注册成功: ', registration);
      })
      .catch(registrationError => {
        console.log('Service Worker注册失败: ', registrationError);
      });
  });
}

额外注意事项 #

• HTTPS要求：Service Worker只能在HTTPS环境下运行（localhost除外），所以生产环境部署时要确保使用HTTPS。
• 开发环境测试：如果要在开发环境测试PWA，可以配置Webpack Dev Server启用HTTPS，或者直接用localhost访问。
• 缓存更新：使用GenerateSW时，当你更新项目代码，Workbox会自动检测资源变化并更新service worker；如果是自定义service worker，需要自己处理更新逻辑（比如监听updatefound事件）。

内容的提问来源于stack exchange，提问作者volume one