前端部署自动上传资源文件到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了
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。