访问Quasar(或Vue 3)应用程序名称变量的最佳方式是什么

Question

如何在Quasar中实现这样的东西，而不重新定义每个组件中的变量：

<template>
<div>Welcome to {{ APP_NAME }}.</div>
</template>

我的应用程序是使用Quasar CLI安装的，它在安装过程中要求提供应用程序名称，所以我想它会作为全局变量或我可以访问的东西存储在某个地方。

如果做不到这一点，也许Vue 3有办法做到这一点。

Answer 1

Quasar没有显式使用main.js文件。当使用quasar cli创建项目时，大多数建议的答案都不起作用。使用quasar.config.js可能会起作用，但它仍然不是正确的地方

由于您使用了quasar cli，因此需要添加一个带有quasar new boot的启动文件。

这将在src/boot文件夹中生成文件ezglobals.js：quasar new boot ezglobals

编辑后，ezglobals.js文件中的代码将如下所示：

import { boot } from 'quasar/wrappers'
export default boot(({ app }) => {
app.config.globalProperties.$APP_NAME = 'The name of your app';
})

最后在quasar.config.js中，将ezglobals.js添加到引导数组：

...
boot: [
'ezglobals.js'
]
...

Answer 2

Yo可以在Vue 3:中创建全局变量

const globalVariable = 'app name'
app.config.globalProperties.$appName = globalVariable

然后在任何模板中显示，如：

<template>
<div>Welcome to {{ $appName }}.</div>
</template>

Answer 3

有几种方法可以做到这一点。

在使用Quasar CLI创建项目期间指定的名称存储在package.json文件("name": "…"(中。你可以访问这样的package.json变量：

process.env.npm_package_name

这里有一个链接，包含更多信息：https://docs.npmjs.com/cli/v6/using-npm/scripts#packagejson-vars

要使其全局可用，可以创建一个指定全局变量的启动文件。

在这里，您可以阅读更多关于如何创建和使用引导文件的信息(引导是由quasar cli创建的项目中的一个文件夹(：https://quasar.dev/quasar-cli/boot-files

在这里，您可以找到定义全局变量的更多信息：https://v3.vuejs.org/api/application-config.html#globalproperties

Answer 4

您应该在main.js 中导入Quasar

import { useQuasar } from 'Quasar'

createApp(App).use(Quasar, { config: {} }).mount('#app')

Answer 5

不完全全局-你必须让它在你想使用的每个组件中都可用。

在quasar.config.js文件中定义一些env选项：

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,
},
},
},
// ....
}
});

比你需要在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>

或者对于脚本部分，采用较老的方式：

<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>