最近用vue-element-admin做了个后台管理系统，开发完成后部署的时候决定把index.html放到web服务器上，其余的静态资源全部放到阿里云上（cdn + oss）这样做有以下好处：
- 释放web服务器的带宽
- 更快
- 更平滑的版本迭代（下面会有详细描述）
下面为实践过程，基于vue-cli3的部署过程（vue-cli2的童鞋也可以参考，但是推荐vue-cli3，因为几乎0配置～）
- 安装webpack-aliyun-oss-plugin包
npm install webpack-aliyun-oss-plugin --save-dev
这个包的作用是在你执行npm run build的时候直接上传打包好的文件到你的阿里云oss上面。
- 配置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”设置为指定值或者不填，确认该项配置无误。
