Vue如何实现webpack和service-workers

Question

目前，我的 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 每次通知用户新版本并要求他们重新加载页面。

Answer 1

您不需要将 Webpack 集成到 Vue CLI 脚手架项目中。 Vue CLI uses Webpack 底层。

要配置底层 Webpack，请使用 chainWebpack or configureWebpack 属性:

创建 vue.config.js

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

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

$ vue add pwa

Vue如何实现webpack和service-workers

Vue How to implement webpack and service-workers

webpack

vue.js

vue-cli