@vue/cli-plugin-pwa 中文翻译


用于vue cli的pwa插件,关于配置介绍翻译

service worker 介绍:https://segmentfault.com/a/1190000016028780

The service worker added with this plugin is only enabled in the production environment (e.g. only if you run npm run build or yarn build). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included.

使用此插件添加的Service Worker仅在生产环境中启用(例如,仅当您运行“npm run build”或“yarn build”时)。建议不要在开发模式下启用ServiceWorker,因为这可能导致使用以前缓存的资源而不包括最新的本地更改的情况。

Instead, in the development mode the noopServiceWorker.js is included. This service worker file is effectively a ‘no-op’ that will reset any previous service worker registered for the same host:port combination.

相反,在开发模式中noopServiceWorker.js会包括在内。此service worker文件实际上是一个“no op”,它将重置以前为其注册的任何service worker 服务host:port。

If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It’s recommended to use a browser incognito window to avoid complications with your browser cache.

如果需要在本地测试service worker,请构建应用程序并从构建目录运行一个简单的HTTP服务器。为了避免浏览器缓存的复杂性,推荐新打开一个窗口。


Configuration is handled via the pwa property of either the vue.config.js
file, or the "vue" field in package.json.


  • pwa.workboxPluginMode

    This allows you to choose between the two modes supported by the underlying


  • 'GenerateSW' (default), will lead to a new service worker file being created
    each time you rebuild your web app.

  • 'GenerateSW'(默认),每次你构建应用的时候,都会重新创建一个新的service worker

  • 'InjectManifest' allows you to start with an existing service worker file,
    and creates a copy of that file with a “precache manifest” injected into it.

  • InjectManifest允许您从现有的service worker文件开始,

The “Which Plugin to Use?
guide can help you choose between the two modes.


  • pwa.workboxOptions

    These options are passed on through to the underlying workbox-webpack-plugin.

    For more information on what values are supported, please see the guide for
    or for InjectManifest.

这些配置都是 workbox-webpack-plugin的配置,更多关于值的信息需要点击查下面的文档指南。

GenerateSW or for InjectManifest.

  • pwa.name

    • Default: “name” field in package.json

      Used as the value for the apple-mobile-web-app-title meta tag in the generated HTML. Note you will need to edit public/manifest.json to match this.

    • 默认: package.json中"name"

      Used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML. Note you will need to edit `public/manifest.json` to match this.

      在生成的HTML中用作“apple-mobile-web-app-title”元标签的值。注意,您需要编辑 public/manifest.json来匹配这个。

  • pwa.themeColor

    • Default: '#4DBA87'
  • pwa.msTileColor

    • Default: '#000000'

  • pwa.appleMobileWebAppCapable

    • Default: 'no'

      This defaults to 'no' because iOS before 11.3 does not have proper PWA support. See this article for more details.


  • pwa.appleMobileWebAppStatusBarStyle

    • Default: 'default'

  • pwa.assetsVersion

    • Default: ''

      This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append ?v=<pwa.assetsVersion> to the URLs of the icons and manifest.

      这个选项是用来为icons 和 mainfest 添加版本,用来针对浏览器缓存问题。它将会在icons和mainfest url上追加?v=<pwa.assetsVersion>

  • pwa.manifestPath

    • Default: 'manifest.json'

      The path of app’s manifest. If the path is an URL, the plugin won’t generate a manifest.json in the dist directory during the build.


  • pwa.manifestOptions

    • Default: {}

      The object will be used to generate the manifest.json

      If the following attributes are not defined in the object, the options of pwa or default options will be used instead.

      • name: pwa.name
      • short_name: pwa.name
      • start_url: '.'
      • display: 'standalone'
      • theme_color: pwa.themeColor


    • name: pwa.name
    • short_name: pwa.name
    • start_url: '.'
    • display: 'standalone'
    • theme_color: pwa.themeColor

  • pwa.manifestCrossorigin

    • Default: undefined

      Value for crossorigin attribute in manifest link tag in the generated HTML. You may need to set this if your PWA is behind an authenticated proxy. See cross-origin values for more details.

      在生成的HTML中的manifest链接标记中为’ crossorigin '属性的值。如果您的PWA位于经过身份验证的代理之后,您可能需要设置此选项。请参阅跨源值了解更多细节。

  • pwa.iconPaths

    • Defaults:

        favicon32: 'img/icons/favicon-32x32.png',
        favicon16: 'img/icons/favicon-16x16.png',
        appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
        maskIcon: 'img/icons/safari-pinned-tab.svg',
        msTileImage: 'img/icons/msapplication-icon-144x144.png'

      Change these values to use different paths for your icons. As of v4.3.0, you can use null as a value and that icon will not be included.

      更改这些值为图标使用不同的路径。从v4.3.0开始,您可以使用’ null '作为值,该图标将不包括在内。


// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...


vue add pwa


  • config.plugin('workbox')
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页