¿Cómo implemento algo como esto en Quasar sin redefinir la variable en cada componente?
<template> <div>Welcome to {{ APP_NAME }}.</div> </template>Mi aplicación se configuró usando Quasar CLI, que solicitó un nombre de aplicación durante la configuración, por lo que imagino que está almacenada en algún lugar como una variable global o algo a lo que puedo acceder.
De lo contrario, tal vez Vue 3 tenga una forma de hacerlo.
Puedes crear una variable global en Vue 3:
const globalVariable = 'app name' app.config.globalProperties.$appName = globalVariabley luego mostrarlo en cualquier plantilla como:
<template> <div>Welcome to {{ $appName }}.</div> </template>Hay algunas maneras de cómo podrías hacerlo.
El nombre que especificó durante la creación del proyecto usando Quasar CLI se almacena en su archivo package.json ( "name": "…" ). Puede acceder a package.json vars así:
process.env.npm_package_nameAquí hay un enlace con más información al respecto: https://docs.npmjs.com/cli/v6/using-npm/scripts#packagejson-vars
Para que esté disponible globalmente, puede crear un archivo de arranque especificando una variable global.
Aquí puede leer más sobre cómo crear y usar archivos de arranque (boot es una carpeta en su proyecto creada por quasar cli): https://quasar.dev/quasar-cli/boot-files
Aquí puede encontrar más información para definir variables globales: https://v3.vuejs.org/api/application-config.html#globalproperties
no exactamente global: debe hacerlo disponible en cada componente que desee utilizar.
defina algunas opciones env en su archivo quasar.config.js :
const packageInfo = require('./package.json') const { configure } = require('quasar/wrappers'); module.exports = configure(function (ctx) { return { // .... build: { // .... env: { // https://forum.quasar-framework.org/topic/6853/auto-generate-a-build-number-in-spa/15?_=1653270667151 // https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats // TEST: "42", appinfo: { name: packageInfo.name, version: packageInfo.version, productName: packageInfo.productName, description: packageInfo.description, projectUrl: packageInfo.projectUrl, previewUrl: packageInfo.previewUrl, }, }, }, // .... } }); de lo que necesita incluir algo como esto en el archivo YourComponent.vue :
<template> <q-page class="flex column" style="align-items: center;" > <section> <h4>{{ appinfo.productName }}</h4> <p> version: v{{ appinfo.version }} </p> <p> {{ appinfo.description }}<br> find the project repository at <br> <a target="_blank" :href="appinfo.projectUrl" > {{ appinfo.projectUrl }} </a> </p> <p> a live preview version is hosted at<br> <a target="_blank" :href="appinfo.previewUrl" > {{ appinfo.previewUrl }} </a> </p> </section> </q-page> </template> <script setup> // https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats // console.log(process.env.TEST) const appinfo = process.env.appinfo </script>o para la parte del guión de la manera anterior:
<script> export default { name: 'AboutPage', data () { // https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats // console.log(process.env.TEST) return { appinfo: process.env.appinfo, } } } </script>