【Nuxt】配置

avatar
作者
筋斗云
阅读量:0

Nuxt 配置

nuxt.config.ts 里面可以添加相关配置:

runtimeConfig 运行时配置。

// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({   compatibilityDate: '2024-04-03',   devtools: {enabled: true},   runtimeConfig: {     appKey: process.env.APP_KEY,     public: {       baseUrl: process.env.BASE_URL,     }   } });  

.env :

通过 process.env.xxx 来获取,项目运行会自动读取该文件。port 端口默认也是 3000 。

APP_KEY='your_app_key' BASE_URL='https://api.yourwebsite.com' PORT=3000 

env 环境变量的优先级更高,如果使用 NUXT_ 开头的,其他 nuxt 配置中的环境变量会被替换:在这里插入图片描述
这里的 appKey 变量值就会变为: ‘DDDDDD’。使用 NUXT_PUBLIC_BASE_URL也是同理。

app.vue

<template>   <div>     <NuxtRouteAnnouncer />     <NuxtWelcome />   </div> </template> <script setup> const runtimeConfig = useRuntimeConfig() //判断代码运行的环境 if (process.client) {   console.log('This code is running on the client')   // console.log(runtimeConfig.appKey) // 该属性客户端不可以访问   console.log(runtimeConfig.public.baseUrl) } if (process.server) {   console.log('This code is running on the server')   console.log(runtimeConfig.appKey)   // public 内属性客户端和服务器都可以访问   // public 外属性只有服务器都可以访问   console.log(runtimeConfig.public.baseUrl) }