(next 10) - 将 basePath 添加到 next.config.js 时，next-pwa 不起作用答案

【问题标题】：(next 10) - next-pwa does not work when add the basePath to next.config.js(next 10) - 将 basePath 添加到 next.config.js 时，next-pwa 不起作用
【发布时间】：2021-06-26 05:33:48
【问题描述】：

我正在使用 nextJS 版本“10.0.9”和 next-pwa 版本“^5.0.6”，它们一起工作得很好，我的应用程序无法满足，但由于某些原因，我需要为所有路由添加前缀所以我在 next.config.js 文件中添加了“basePath”属性并将其设置为“/recharge-cards”，但之后我的应用程序变得可卸载，我尝试了很多东西，我将范围和 subdomainPrefix 更改为“/recharge -cards”并更改我的 _document.js 上的文件路径，但似乎没有任何效果。

你会在下面找到我的文件，所以请帮我解决这个问题

manifest.json

{
  "name": "next-pwa",
  "short_name": "next-pwa",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "start_url": "/recharge-cards",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

next.config.js

const withPWA = require('next-pwa');

module.exports = withPWA({
    basePath: "recharge-cards",
    pwa: {
    dest: 'public',
  },
});

_document.js（头部）

<Head>
  <meta name='application-name' content={APP_NAME} />
  <meta name='apple-mobile-web-app-capable' content='yes' />
  <meta name='apple-mobile-web-app-status-bar-style' content='default' />
  <meta name='apple-mobile-web-app-title' content={APP_NAME} />
  <meta name='description' content={APP_DESCRIPTION} />
  <meta name='format-detection' content='telephone=no' />
  <meta name='mobile-web-app-capable' content='yes' />
  <meta name='theme-color' content='#FFFFFF' />
  <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
  <link rel='manifest' href='/manifest.json' />
  <link rel='shortcut icon' href='/favicon.ico' />
</Head>

项目文件

【问题讨论】：

标签： reactjs next.js progressive-web-apps next-pwa

【解决方案1】：

经过多次实验，我解决了，下面你会找到我的解决方案

manifest.json

{
  "name": "Nana digital goods",
  "short_name": "Nana Digital",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#227a40",
  "background_color": "#fff",
  "start_url": "/recharge-cards/",
  "icons": [
    {
      "src": "/recharge-cards/assets/images/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/recharge-cards/assets/images/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

next.config.js

const withPWA = require('next-pwa');
const nextTranslate = require('next-translate');
const path = require('path');

module.exports = withPWA({
    trailingSlash: true,
    basePath: '/recharge-cards',
    async redirects() {
    return [
      {
        source: '/',
        destination: '/recharge-cards',
        basePath: false,
        permanent: false,
      },
    ]
  },
    webpackDevMiddleware: config => {
        config.watchOptions = {
            poll: 1000,
            aggregateTimeout: 300
        }
        return config
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    },
    publicRuntimeConfig: {},
  ...nextTranslate(),
    pwa: {
    dest: 'public',
        subdomainPrefix: '/recharge-cards/',
    scope: '/'
  },
});

_document.js（头部）

<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name='application-name' content={APP_NAME} />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='default' />
<meta name='apple-mobile-web-app-title' content={APP_NAME} />
<meta name='description' content={APP_DESCRIPTION} />
<meta name='format-detection' content='telephone=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='theme-color' content='#227a40' />
<title>{this.title}</title>
<link rel='apple-touch-icon' sizes='180x180' href='/recharge-cards/apple-touch-icon.png' />
<link rel='manifest' href='/recharge-cards/manifest.json' />
<link rel='shortcut icon' href='/recharge-cards/favicon.ico' />
<link rel="icon" type="image/png" sizes="32x32" href="/recharge-cards/assets/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/recharge-cards/assets/images/favicon-16x16.png" />

项目文件

【讨论】：

您能否简要描述一下您所做的更改以使其在您的答案中发挥作用？

【解决方案2】：

我也在为此苦苦挣扎，我的解决方案是确保清单中的 start_url 以 / 结尾。

例如"start_url": "/recharge-cards/"

【讨论】：