当前位置: 首页 > news >正文

前端部署自动上传资源文件到cdn/oss 解决路由和访问慢的问题

参考文档:webpack-aliyun-oss-plugin - npm

安装依赖,这是一个预编译环境下的包

npm install webpack-aliyun-oss-plugin --save-dev

以下代码的意思是:

webpack中引入一个oss上传插件,并且给予其初始参数,插件根据publicPath提供的域名后的path,将打包的文件一个个按照上传到path对应的目录中,并且根据from的路径指示,将./dist/static下的所有文件都按路径上传

1,关键点一:/scrm/xxa/xxb 无论建立多少级,oss桶都是自动建立的,无需人手动先把这些目录建立了,例如上面的path对应oss的目录/scrm/xxa/xxb下面,./dist/static下的文件也会被上传到这个目录下,这个目录却不需要先行建立

publicPath: process.env.NODE_ENV === 'production' ? `https://static-global.uncledesk.com/${version_path}/` : '/',chainWebpack: config => {config.resolve.symlinks(true); // 修复热更新失效// 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中config.plugin("html").tap(args => {// 修复 Lazy loading routes Errorargs[0].chunksSortMode = "none";return args;});if (IS_PROD) {config.plugin('webpack-aliyun-oss-plugin')// 原案例中这里用了require, 我通过vue.config.js官方文档了解到,不加// 也可以,事实上不加也可以.use('webpack-aliyun-oss-plugin', [{from: ['./dist'],region: 'oss-us-west-1',ak: 'xxxx',sk: 'xxxxxxxx',bucket: 'static-oss-cdn',filter: function (asset) {return !/\.html$/.test(asset); // 不上传index.html}}]);}
}

version_path: "1_3_25" 可以通过 package.json 中的version参数,然后根据点转下划线,为何强调这一点,因为如果一开始不做好版本隔离,那么以后你想从cdn删除,就够麻烦了,所以这里特别提醒记得做版本文件夹隔离,不用的版本到时直接删掉就OK了

http://www.lryc.cn/news/396254.html

相关文章:

  • Diffusion 公式推导 2
  • layui-表单(输入框)
  • 中职网络安全B模块渗透测试server2380
  • 微信小程序毕业设计-教育培训系统项目开发实战(附源码+论文)
  • 【面试题】正向代理和反向代理的区别?
  • Python面试宝典第8题:二叉树遍历
  • FastReport 指定sql 和修改 数据库连接地址的 工具类 :FastReportHelper
  • C++11中重要的新特性 Part one
  • VB 关键字
  • Linux——多线程(四)
  • InetAddress.getLocalHost().getHostAddress()阻塞导致整个微服务崩溃
  • 在 Qt6 中,QList 和 QVector 统一 成qlist了吗?
  • 第三期书生大模型实战营 第1关 Linux 基础知识
  • 架构设计(1)分布式架构
  • 机器学习笔记:初始化0的问题
  • JavaWeb—js(3)
  • PLSQL Day4
  • git合并报错:git -c core.quotepath=false -c log.showSignature=false merge r
  • 云原生存储:使用MinIO与Spring整合
  • 等保测评新趋势:应对数字化转型中的安全挑战
  • 使用esptool工具备份ESP32的固件(从芯片中备份下来固件)
  • JS进阶-解析赋值
  • Java虚拟机面试题汇总
  • C++休眠的方法
  • 选择排序(C语言版)
  • 基于CentOS Stream 9平台搭建FRP内网穿透
  • Redis管理禁用命令
  • RFID智能锁控系统在物流安全运输中的应用与效益分析
  • WPF设置全局样式
  • 【福利】代码公开!咸鱼之王自动答题脚本