如何在Vue CLI构建的Vue PWA中传递参数获取不同数据？

针对你遇到的PWA安装后GET参数丢失问题，以下是几个经过验证的解决方案，同时支持子域名场景：

1. 安装前捕获参数并本地存储 #

利用浏览器的beforeinstallprompt事件，在用户触发PWA安装提示前，将当前URL的查询参数存入本地存储，待应用启动后读取使用：

• 在App.vue的mounted钩子中监听安装事件：

mounted() {
  window.addEventListener('beforeinstallprompt', (e) => {
    // 提取当前URL的code参数
    const searchParams = new URLSearchParams(window.location.search);
    const code = searchParams.get('code');
    if (code) {
      localStorage.setItem('pwa_install_code', code);
    }
    // 暂存安装事件，方便后续手动触发安装（可选）
    window.deferredPrompt = e;
  });
}

• 在应用启动时（比如App.vue的created钩子）读取存储的参数：

created() {
  const savedCode = localStorage.getItem('pwa_install_code');
  if (savedCode) {
    // 调用API获取对应数据
    this.fetchAppData(savedCode);
    // 用完清除，避免重复使用
    localStorage.removeItem('pwa_install_code');
  } else {
    // 处理直接打开应用或无参数的情况
    const currentParams = new URLSearchParams(window.location.search);
    const code = currentParams.get('code');
    code && this.fetchAppData(code);
  }
}

2. 将参数嵌入URL哈希（Hash）中 #

PWA的manifest默认不会保留查询参数，但URL的哈希部分（#之后的内容）通常会被完整保留。可以将参数放在哈希里，安装后启动时解析：

• 修改访问链接为：http://localhost:8080/proconnect/#?code=123
• 在应用中解析哈希参数：

const hashParams = new URLSearchParams(window.location.hash.slice(1));
const code = hashParams.get('code');
if (code) {
  this.fetchAppData(code);
}

这种方式无需修改Service Worker配置，适配性强，且支持子域名场景。

3. 配置Service Worker缓存策略，保留查询参数 #

Vue CLI生成的PWA默认会缓存根页面，可能导致安装后启动时读取缓存的无参数页面。通过修改workbox配置，确保根路径请求优先从网络获取：

• 在vue.config.js中添加PWA配置：

module.exports = {
  publicPath: '/proconnect/',
  pwa: {
    workboxOptions: {
      runtimeCaching: [
        {
          urlPattern: /^\/proconnect\/$/,
          handler: 'NetworkFirst',
          options: {
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
    }
  }
}

这样PWA启动时会先请求网络获取带参数的页面，避免读取缓存的静态页面。

4. 后端PHP配合，通过Cookie传递参数 #

利用Cookie跨会话保存参数，同时支持子域名共享：

• 在PHP后端处理请求时，将GET参数写入Cookie：

<?php
if (isset($_GET['code'])) {
  // 设置Cookie，domain设为父域名（如.example.com）支持子域名访问
  setcookie(
    'app_auth_code',
    $_GET['code'],
    time() + 3600 * 24, // 有效期1天
    '/proconnect/',
    '.yourdomain.com', // 替换为实际父域名
    false,
    true // 仅HTTPS下传输（生产环境建议开启）
  );
}
?>

• 在Vue应用中读取Cookie参数：

// 工具函数：获取指定Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  return parts.length === 2 ? parts.pop().split(';').shift() : null;
}

// 应用启动时读取
created() {
  const code = getCookie('app_auth_code');
  if (code) {
    this.fetchAppData(code);
  }
}

内容的提问来源于stack exchange，提问作者Yaroslav Saenko