# vue如何自动处理静态资源上传至对象存储
vue如何自动处理静态资源上传至对象存储
例子是腾讯云对象存储，请自行修改
实际情况下，前端项目部署在vercel或者netlify等，国内访问网速很慢，所以通过此方法可以把打包后的dist静态资源（比如js,css,png等）上传到对象存储，达到优化网站速度的目的。
# 依赖
npm i cos-nodejs-sdk-v5
1
# 上传至COS的脚本文件
# 项目根目录新建文件uploadToCOS.js
自行修改腾讯云密钥和存储桶信息
const path = require("path");
const fs = require("fs");
const COS = require("cos-nodejs-sdk-v5");
// 配置腾讯云COS参数
const cos = new COS({
SecretId: "", // 身份识别 ID
SecretKey: "", // 身份密钥
});
// 获取dist目录下的所有文件
const dirPath = path.resolve(__dirname, "dist");
// 定义上传到 COS 上的前缀目录
const base = "HomePage/";
// 遍历目录并上传文件
function traverseDirectory(dirPath, prefix = "") {
const files = fs.readdirSync(dirPath);
files.forEach((file) => {
const filePath = path.join(dirPath, file);
const relativePath = path.relative(dirPath, filePath);
const cosKey = path.join(prefix, relativePath).replace(/\\/g, "/"); // 使用 / 替换 \，确保在 COS 上是正斜杠
if (fs.statSync(filePath).isDirectory()) {
// 如果是目录，则继续遍历子目录，并传入新的前缀
traverseDirectory(filePath, cosKey);
} else {
// 如果是文件，则上传文件
fs.readFile(filePath, (err, data) => {
if (err) {
console.error(`\n读取文件 ${relativePath} 失败：`, err);
return;
}
const params = {
Bucket: "",//存储桶名
Region: "",//地域名
Key: base + cosKey,
Body: data, // 使用文件内容进行上传
};
cos.putObject(params, function (err, data) {
if (err) {
console.log(data);
console.error(`\n上传文件 ${relativePath} 失败：`, err);
} else {
console.log(data);
console.log(`\n上传文件 ${relativePath} 成功`);
}
});
});
}
});
}
// 开始遍历上传
traverseDirectory(dirPath);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
# 修改package.json
在build命令后面增加 && node uploadToCOS.js
列如：
vue2+vuecli
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build && node uploadToCOS.js"
},
1
2
3
4
2
3
4
vue3+vite
"scripts": {
"dev": "vite --mode dev",
"serve": "vite --mode prod",
"build": "vite build --mode prod && node uploadToCOS.js",
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
},
1
2
3
4
5
6
2
3
4
5
6
# vue2+vuecli
修改vue.config.js文件
请自行做开发环境 / 生产环境判断
publicPath: 'https://...', //vue-cli3.3+新版本使用，修改为你的对象存储url
1
# vue3+vite
修改vite.config.ts文件
const host = "https://..." //你的对象存储url
// 为生产环境静态资源设置不同的路径，请先运行uploadToCOS.js上传静态资源到COS
experimental: {
renderBuiltUrl(filename: string, { hostId, hostType, type }: { hostId: string, hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) {
return host + filename
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8