以下Demo为例,demo参加了一个页面,但页面中的库都是cdn过来的。
我希望再云函数根目录新建CSS或JS,实现本地调用。或者通过云存储调用也行。
尝试调用本地文件的代码(但这样是无法实现的):
<link href="cloud://wework-1c9fv.7765-wework-1c9fv-1302668058/cdn/fonts.css" rel="stylesheet"
type="text/css">
<link href="\fonts.css" rel="stylesheet"
type="text/css">
完整代码:
//替换 envId 为您的环境ID
const ENV_ID = "XXXX"
exports.main = async (event) => {
// 网页JS代码
const script =
`
const ENV_ID = "${ENV_ID}"
class FunctionQuickStarter {
constructor() {
// 初始化 CloudBase
this.app = cloudbase.init({
env: ENV_ID,
region: "ap-shanghai"
})
this.signIn()
}
// 匿名登录
signIn() {
var auth = this.app.auth({
persistence: "local"
})
if (!auth.hasLoginState()) {
auth.anonymousAuthProvider().signIn()
.then(() => {
this.setButtonStatus(false)
})
} else {
this.setButtonStatus(false)
}
}
}
window.addEventListener("load", function () {
window.app = new FunctionQuickStarter()
})
`
// 网页HTML代码
const body =
`<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@2.3.3")
-->
<head>
<!-- 问题在这里 -->
<link href="cloud://wework-1c9fv.7765-wework-1c9fv-1302668058/cdn/fonts.css" rel="stylesheet"
type="text/css">
<link href="\fonts.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.3.3/dist/quasar.prod.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- example of injection point where you write your app template -->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md" style="max-width: 400px">
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
<q-input filled v-model="name" label="Your name *" hint="Name and surname" lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"></q-input>
<q-input filled type="number" v-model="age" label="Your age *" lazy-rules :rules="[
val => val !== null && val !== '' || 'Please type your age',
val => val > 0 && val < 100 || 'Please type a real age'
]"></q-input>
<q-toggle v-model="accept" label="I accept the license and terms"></q-toggle>
<div>
<q-btn label="Submit" type="submit" color="primary"></q-btn>
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm"></q-btn>
</div>
</q-form>
</div>
</div>
<!-- Add the following at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.3.3/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.3.3/dist/lang/zh-CN.umd.prod.js"></script>
<script>
/*
Example kicking off the UI. Obviously, adapt this to your specific needs.
Assumes you have a <div id="q-app"></div> in your <body> above
*/
const { useQuasar } = Quasar
const { ref } = Vue
const app = Vue.createApp({
setup() {
const $q = useQuasar()
const name = ref(null)
const age = ref(null)
const accept = ref(false)
return {
name,
age,
accept,
onSubmit() {
if (accept.value !== true) {
$q.notify({
color: 'red-5',
textColor: 'white',
icon: 'warning',
message: 'You need to accept the license and terms first'
})
}
else {
$q.notify({
color: 'green-4',
textColor: 'white',
icon: 'cloud_done',
message: 'Submitted'
})
}
},
onReset() {
name.value = null
age.value = null
accept.value = false
}
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
</script>
</body>
</html>`
return {
statusCode: 200,
headers: {
'content-type': 'text/html'
},
body: body
}
}
用云存储的https地址不就行了
可行是可行。
另外,我不知道云存储的https地址会不会定期改变。
如果在云函数根目录和云存储文件ID不行,就只能按照你的方法了。
谢谢