es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo usar una variable de entorno de CloudFlare Worker en Quasar? (Vue)

05 Aug, 2023 Programación

¡Hola y feliz año nuevo!

Me enfrento a un problema en mi aplicación Quasar (v1) en relación con las variables de entorno. No quiero resolver esto usando dotenv u otro paquete de Node, ya que ya no se recomienda utilizar variables de entorno de esta manera en Quasar.

Entonces, tengo algunas variables de entorno locales que estoy configurando/utilizando, siguiendo las mejores prácticas documentadas en la documentación oficial de Quasar:

quasar.conf.js:

build: {
  env: {
      EXAMPLE: ctx.dev
      ? JSON.stringify('https://dev.')
      : JSON.stringify('https://prod.')
  },

Esto me permite especificar un punto final diferente en el entorno de desarrollo y producción, como es de esperar, pero no es ideal por algunas razones obvias.

index.vue:

console.log(process.env.EXAMPLE,'<---API')

Obtengo la salida esperada de mi punto final de API simulado. Bueno.

Ahora bien, las variables de CloudFlare Workers están a nivel global (no hay objeto process.env), por lo que una vez configuradas en wrangler.toml, debería ser posible llamarlas simplemente por su nombre:

wrangler.toml:

[vars]
CFEXAMPLE = "example_token"

PERO esto no funciona (no puedo hacer que mi aplicación Quasar se compile si incluyo esto de la siguiente manera). Probablemente porque CFEXAMPLE no está definido en mi quasar.conf.js.

quasar.conf.js:

build: {
  env: {
      CFEXAMPLE: CFEXAMPLE
  },

Tampoco puedo hacer console.log de CFEXAMPLE desde mi archivo index.vue (pero puedo compilar mi aplicación y desplegarla en CloudFlare sin problemas).

¿Cuál es la mejor manera de hacer que las variables de entorno funcionen correctamente en CloudFlare y en localhost, por favor?

Gracias

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ¡Hola y Feliz Año Nuevo!

    Parece que estás enfrentando un problema con las variables de entorno en tu aplicación Quasar(v1) al usar CloudFlare Workers. Dado que las variables de CloudFlare Workers tienen un alcance global y no están definidas en tu quasar.conf.js, no puedes llamarlas directamente.

    Para resolver este problema, puedes crear un archivo separado, digamos config.js, que defina tus variables de entorno de la siguiente manera:

    const config = {
  API_ENDPOINT: process.env['API_ENDPOINT'],
  CFEXAMPLE: process.env['CFEXAMPLE']
}

export default config

    Luego puedes importar este archivo en tu quasar.conf.js y index.vue de la siguiente manera:

    quasar.conf.js:

    import config from './config.js'

// ...

module.exports = {
  // ...
  build: {
    env: {
      API_ENDPOINT: config.API_ENDPOINT,
      CFEXAMPLE: config.CFEXAMPLE
    }
  }
}

    index.vue:

    import config from './config'

// ...

console.log(config.API_ENDPOINT, '<---API Endpoint')
console.log(config.CFEXAMPLE, '<---CFEXAMPLE')

    De esta manera, podrás acceder a las variables de entorno tanto en CloudFlare como en localhost, manteniendo tus variables seguras.

    ¡Espero que esto te sea útil!

Comments are closed.