收藏
回答

云开发nodejs云函数,如何调用本地CSS、JS文件?

以下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
    }
}



回答关注问题邀请回答
收藏

1 个回答

  • Mr.Zhao
    Mr.Zhao
    2021-11-23

    用云存储的https地址不就行了

    2021-11-23
    有用 1
    回复 3
    • 唐同学
      唐同学
      2021-11-23
      谢谢回访


      可行是可行。


      另外,我不知道云存储的https地址会不会定期改变。
      如果在云函数根目录和云存储文件ID不行,就只能按照你的方法了。


      谢谢
      2021-11-23
      回复
    • Mr.Zhao
      Mr.Zhao
      2021-11-23回复唐同学
      静态网站托管不也行
      2021-11-23
      回复
    • 唐同学
      唐同学
      2021-11-23回复Mr.Zhao
      谢谢
      2021-11-23
      回复
登录 后发表内容