打包dist文件上传到oss教程
1: 确保boot工程里面安装了「webpack-aliyun-oss」依赖, 如果没有安装，可以手动安装下
2: package.json -> devDependencies -> {"webpack-aliyun-oss": "0.5.2"}
3: 在vue.config.js文件中添加对应的plugin
// vue.config.js文件
// 新增代码
let BASE_URL = '/';
const { DEPLOY, OSS_REGION, OSS_DIST, OSS_URL, OSS_ACCESS_KEY_ID, OSS_ACCESS_KEY_SECRET, OSS_BUCKET } = process.env;
const UNIQUE_KEY = Math.random();
switch (DEPLOY) {
case 'online':
BASE_URL = `${OSS_URL}${UNIQUE_KEY}/`;
break;
default:
BASE_URL = '/';
}
module.exports = {
...原先的代码,
publicPath: BASE_URL,
plugins: [
...原先的插件,
DEPLOY === 'online'
? new WebpackAliyunOss({
from: ['./dist/**/**', '!./dist/**/*.html'], // build目录下除html之外的所有文件
dist: `${OSS_DIST}/${UNIQUE_KEY}`, // oss上传目录
region: OSS_REGION, // 地区, 比如 oss-cn-hangzhou
accessKeyId: OSS_ACCESS_KEY_ID,
accessKeySecret: OSS_ACCESS_KEY_SECRET,
bucket: OSS_BUCKET,
timeout: 1200000,
deleteOrigin: true,
deleteEmptyDir: true,
overwrite: true
})
: () => {}
]
}4: 在vue.config.js同级目录下面新增「.env」文件, 写入对应的配置, 配置对应的值按照自己的oss配置来
DEPLOY=online
OSS_BUCKET=xxx
OSS_DIST=/oinone/product
OSS_URL=https://xxxxxx/oinone/product/
OSS_REGION=oss-cn-hangzhou
OSS_ACCESS_KEY_ID=xxxx
OSS_ACCESS_KEY_SECRET=xxxxOinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/69.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
