Vue 如何实现 webpack 和 service-workers答案

【问题标题】：Vue How to implement webpack and service-workersVue 如何实现 webpack 和 service-workers
【发布时间】：2021-09-13 08:16:35
【问题描述】：

目前，我的 vue 应用有一个这样的 package.json：

{
  "name": "App",
  "version": "0.1.2",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
  }
}

在我的main.js 我有这个：

if(process.env.NODE_ENV == 'development')
    Vue.prototype.$http.defaults.baseURL = 'http://127.0.0.1:8000/api'
else
    Vue.prototype.$http.defaults.baseURL = 'https://api.example.net/api'

我现在想使用 webpack 来构建我的应用程序并管理某些事情。现在将 webpack 集成到我的项目中并对其进行优化的最佳方法是什么？我想每次都使用 service-worker 通知用户一个新版本，并要求他们重新加载页面。

【问题讨论】：

请提供更多上下文，我真的不明白您的需求。详细的描述，以及到目前为止您尝试过的内容（如果您尝试过）或一些初步研究？

标签： vue.js webpack vue-cli

【解决方案1】：

您不需要将 Webpack 集成到 Vue CLI 脚手架项目中。 Vue CLI uses Webpack 在后台。

要配置底层 Webpack，请使用 chainWebpack 或 configureWebpack 属性创建 vue.config.js：

// vue.config.js
module.exports = {
  configureWebpack: {
    //...
  },
  chainWebpack: config => {
    //...
  }
}

关于 Service Worker，您可以使用 @vue/cli-plugin-pwa plugin，可以使用以下命令将其添加到 Vue CLI 项目中：

$ vue add pwa

【讨论】：