0%

2023-02-07 uni-app 如何不通过 HBuilder X 来配置 uniCloud

2023-02-07 uni-app 如何不通过 HBuilder X 来配置 uniCloud

最近在折腾 uniCloud。uniCloud 提供的云函数等功能可以说是非常好用,但唯一的问题是要通过 HBuilder X 打包才能使用,如果通过 cli 打包就会因为缺少 uniCloud 配置而无法使用云函数等功能,经过一番研究,发现可以通过配置环境变量来解决这个问题。

@dcloudio\vue-cli-plugin-uni\lib\env.js 文件中可以看到 uniCloud 的初始化是通过 UNI_CLOUD_PROVIDERUNI_CLOUD_SPACES 环境变量来进行的,所以可以考虑通过手动配置这两个环境变量来配置 uniCloud 。

image-20230207191213539

经过我个人的实验,手动配置 UNI_CLOUD_SPACES 并不生效,手动配置 UNI_CLOUD_PROVIDER 生效,所以只需要配置 UNI_CLOUD_PROVIDER 即可。

UNI_CLOUD_PROVIDER 的内容如下,是 json 格式的字符串。参考文档:https://uni-app.dcloud.net.cn/uniCloud/concepts/space.html#multi-space

1
2
3
4
5
6
7
8
[
{
"provider": "aliyun", // 服务商,aliyun、tencent
"spaceId": "yyyyyyyyyyyyyyyy", // 服务空间ID,注意是服务空间ID,不是服务空间名称
"clientSecret": "zzzzzzzzzzzzzzzzz", // 仅阿里云支持,可以在uniCloud控制台服务空间列表中查看
"endpoint": "https://api.bspapp.com" // 服务空间地址,仅阿里云支持。商用版请将此参数设为https://api.next.bspapp.com
}
]

由于 vue 的限制,在 .env 中只能配置 VUE_APP_ 开头的环境变量,所以这里需要在 vue.config.js 中手动注入环境变量。参考文档:https://uni-app.dcloud.net.cn/tutorial/env.html#vue-config-js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// vue.config.js
// 配置环境变量
const webpack = require('webpack')

const providers = [
{
"provider": "aliyun", // 服务商,aliyun、tencent
"spaceId": "yyyyyyyyyyyyyyyy", // 服务空间ID,注意是服务空间ID,不是服务空间名称
"clientSecret": "zzzzzzzzzzzzzzzzz", // 仅阿里云支持,可以在uniCloud控制台服务空间列表中查看
"endpoint": "https://api.bspapp.com" // 服务空间地址,仅阿里云支持。商用版请将此参数设为https://api.next.bspapp.com
}
]

module.exports = {
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
args[0]['process.env'].UNI_CLOUD_PROVIDER = JSON.stringify(providers) // 这里要转成字符串
return args
})
}
}

当然,在生产实践中是绝不推荐把spaceIdclientSecret等重要信息写到源代码文件里的,这里可以通过再读取一次环境变量来获取这些信息,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vue.config.js
// 配置环境变量
const webpack = require('webpack')

module.exports = {
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
args[0]['process.env'].UNI_CLOUD_PROVIDER = process.env.UNI_CLOUD_PROVIDER // 在 vue.config.js 中是可以读取到环境变量的
return args
})
}
}

这样就可以不依赖 HBuilder X 来打包,且依旧能使用 uniCloud。

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/d2c0a480.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!