前端部署自动上传资源文件到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 Error
            args[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了

相关推荐
bluceli1 分钟前
JavaScript Proxy与Reflect:元编程的强大工具
前端·javascript
小金鱼Y2 分钟前
从父子到跨层:JavaScript组件通信的 “全链路解决方案”
前端·react.js
V8贤3 分钟前
macOS 安装 oh-my-zsh + 必备插件踩坑记录
前端
Maxkim3 分钟前
实习摸鱼学Web Worker:算1亿个商品价格,终于不卡了!
前端
IT_陈寒4 分钟前
Python开发者都在偷偷用的5个高效技巧,你竟然还不知道?
前端·人工智能·后端
wuhen_n7 分钟前
Pinia 高效指南:状态管理的最佳实践与性能陷阱
前端·javascript·vue.js
饼干哥哥14 分钟前
2026,OpenClaw驱动跨境电商10倍增长
前端·aigc
wuhen_n14 分钟前
VUE3 中的 Axios 二次封装与请求策略
前端·vue.js·axios
陈随易19 分钟前
Vite 8正式发布,内置devtool,Wasm SSR 支持
前端·后端·程序员
CodeSheep27 分钟前
首个OpenClaw龙虾大模型排行榜来了,国产AI霸榜了!
前端·后端·程序员