需求介绍
- 需要资源上传腾讯云，希望上传的密钥是封装的密文
- 这里密钥需要请求接口获取，但是打包项目的时候就会报错找不到密钥
- 所以需要在
vue.config.js文件里面异步数据
项目应用相关插件版本
"vue": "^2.6.11",
"@vue/cli-service": "~4.5.0",
涉及知识点
- vue 注册命令
- vue.config.js文件 获取异步数据
逻辑实现
注册命令
- 新增文件
serve.prehandle.js, - 在文件内部获取异步数据并赋值给全局变量
secretKey， - 在注册命令之后再进行打包，打包完成之后结束进程
module.exports = (api, options) => {
const secretKey = new Promise((resolve, reject)=>{
resolve('yan')
})
// 注册命令
api.registerCommand(
"secretKey",
{
description: "get secretKey", // 命令的注释
usage: "vue-cli-service secretKey", // 命令用法说明
},
async (args) => {
const def = await secretKey()
process.secretKey = def; // 这里将异步结果赋值给全局变量secretKey
// 获取到全局变量之后再执行打包命令
await api.service.run("build", args).catch(() => process.exit(1));
// 打包完成之后结束进程
process.exit();
}
);
};
vue.config.js文件使用chainWebpack支持异步数据
- 将
process.secretKey异步获取的数据同原来数据组合
const CosPlugin = require("cos-webpack");
const cosPlugin = new CosPlugin({
bucket: "r*****",
region: "**",
path: '***',
});
// process.secretKey即异步获取的数据
module.exports = {
chainWebpack: (config) => {
config
.plugin(CosPlugin)
.use(CosPlugin, [cosPlugin, process.secretKey])
.tap((args) => {
args[0].options = { ...args[0], ...args[1] };
return [args[0]]; // 返回的结合数据
});
}
}
设置启动命令
package.json文件配置，在scripts里面配置打包命令- 执行该打包命令就会执行新加的注册命令
secretKey - 配置
vuePlugins为命令secretKey指定文件路径
// 这里 secretKey --mode production 就是新加的命令
"scripts": {
"build": "vue-cli-service secretKey --mode production",
},
"vuePlugins": {
"service": [
"serve.prehandle.js"
]
},
参考
https://lequ7.com/guan-yu-vuecli4vueconfigjs-zhong-chainwebpack-zhi-chi-yi-bu-shu-ju.html
https://cli.vuejs.org/dev-guide/plugin-dev.html#modifying-existing-cli-service-commandx
