vue 中使用 Service Worker 遇到的问题

Posted 2021-12-20 飞翔的熊blabla

先贴一个Service Worker 学习笔记
张鑫旭Service Worker笔记

Service Worker工作只能在https和localhost，因为有很多大佬已经具体讲过怎么使用，那么这里就不多加赘述了，直接解决问题！

我已经知道在上线后缓存文件需要将sw.js(ServiceWorker.js 简写)放到文件的根目录，在vue项目开发模式的时候要放置才能正常使用呢？

问题：vue放置到根目录，启动项目发现找不到sw文件

 

知道问题就可以解决了，问题就是sw.js没有放置在vue项目的 http://localhost:8080/ 根目录，所以我们只需要修改webpack文件，将sw.js地址重定向就可以了！

vue-cli3简化了整个项目的配置，让你可以更专注的在于业务代码。你要是想修改可以直接新建vue.config.js 进行配置修改
Vue CLI 3配置参考

 

下面是vue.config.js配置文件：

const webpack = require('webpack')
module.exports = 
    //部署应用包时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
    productionSourceMap: true,
    configureWebpack: config => 
        if (process.env.NODE_ENV === 'production') 
            // 为生产环境修改配置...
         else 
            // 为开发环境修改配置...
        
    ,
    // css相关配置
    css: 
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: ,
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    ,
    // webpack-dev-server 相关配置
    devServer:  // 设置代理
        hot: true, //热加载
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: 
            '/api':  //本地 
                target: 'xxx',
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true
            ,
            '/test':  //测试
                target: 'xxx'
            ,
            '/pre':  //预发布
                target: 'xxx'
            ,
            '/pro':  //正式
                target: 'xxx'
            
        
    ,
    pluginOptions:  // 第三方插件配置
        // ...
    

修改sw.js路径只需要用到一个CopyWebpackPlugin，所以我这里修改的vue.config.js为：

var CopyWebpackPlugin = require('copy-webpack-plugin')
var path = require('path')

module.exports = 
  configureWebpack: 
      plugins: [
          // copy sw.js path.resolve(__dirname, ‘sw.js所在路径’)
    new CopyWebpackPlugin([
        
          from: path.resolve(__dirname, './sw.js'),
          to: path.resolve(__dirname, './dist'),
          ignore: ['.*']
          
        ])
      ]
  

public中的index.html 注册sw.js：

<script>
  if ('serviceWorker' in navigator) 
    console.log('支持sw');
    // 开始注册service workers
    navigator.serviceWorker.register('./sw.js', 
        scope: './'
    ).then(function (registration) 
        console.log('注册成功');
    ).catch (function (error) 
        console.log('注册没有成功');
    );
     else 
    console.log('不支持');
    
  </script>

再次运行代码，就OK啦！

 

在Network中查看资源：

 

作者：隔壁大胸弟
链接：https://www.jianshu.com/p/13b02169cc01
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。