vue-cli3 打包上传至阿里云oss

最近用vue-element-admin做了个后台管理系统，开发完成后部署的时候决定把index.html放到web服务器上，其余的静态资源全部放到阿里云上（cdn + oss）这样做有以下好处：

• 释放web服务器的带宽
• 更快
• 更平滑的版本迭代（下面会有详细描述）

下面为实践过程，基于vue-cli3的部署过程（vue-cli2的童鞋也可以参考，但是推荐vue-cli3，因为几乎0配置～）

1. 安装webpack-aliyun-oss-plugin包

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

这个包的作用是在你执行npm run build的时候直接上传打包好的文件到你的阿里云oss上面。

2. 配置vue.config.js

// 上述代码是修改你的资源根目录，改为你上传到oss上的目录，getTimeStr()是获取当前时间的格式化字符串，如：20200107211212
publicPath: process.env.NODE_ENV !== 'development' ? ('https://xxx.com/dist/admin/' + getTimeStr() + '/') : './',

上面以时间命名目录的目的就在于更好的版本过渡，每次打包上传都是一个新的以时间命名的目录，如果用户本地的index.html未更新，他也可以正常访问老的静态资源～（可以定时清除较老的静态文件，节约空间，毕竟要钱）

chainWebpack(config) {
   config
     .plugin('webpack-aliyun-oss-plugin')
          .use(require('webpack-aliyun-oss-plugin'), [{
              buildPath: 'dist/admin/**',
              region: 'oss-cn-hangzhou', // 只是示例，如果是别的地区请填别的地区
              ak: 'xxx', // 不知道ak和sk的百度以下把～
              sk: 'xxx',
              bucket: 'xxx',  // bucket的name
              filter: function(asset) {
                return !/\.html$/.test(asset) // 不上传index.html
              }
            }])
}

配置完成后，执行npm run build，可以看到oss上面已经有了你刚上传的静态资源啦！

WechatIMG513.png

注意点：
如果发现页面上的图标不能正确显示，并且字体文件的路径确保是对的情况下，请看下oss如下配置是否正确：

在OSS控制台，选择Bucket后，单击 基础设置，在跨域设置中单击 设置，进行下述配置。

将来源（AllowedOrigin）设置成，确认该配置项无误。如果设置成后可以成功上传，说明是之前的来源（AllowedOrigin）配置错误，请根据规则认真检查。
依次选择“允许 Methods”的全部选项，即GET、PUT、DELETE、POST、HEAD，确认该配置项目无误。
将“允许 Headers”配置成*，确认该配置无误。
将“暴露 Headers”设置为指定值或者不填，确认该项配置无误。