1.在根目錄新增.env
1
2
| API_BASE_URL=https://example.com
DB_PASSWORD=your_secret_password
|
2.nuxt.config.ts設定
在 nuxt.config.ts 中綁定變數
1
2
3
4
5
6
7
8
9
10
11
12
| export default defineNuxtConfig({
//
runtimeConfig: {
// 伺服器端私有變數
dbPassword: process.env.DB_PASSWORD,
// 公開變數（也會暴露給客戶端）
public: {
apiBaseUrl: process.env.API_BASE_URL,
}
}
})
|
3. process問題
解決方法，安裝 @types/node
1
| npm i --save-dev @types/node
|
專案根目錄建立檔案 server/api/test.ts：
1
2
3
4
5
6
7
8
| export default defineEventHandler((event) => {
const config = useRuntimeConfig()
// 這會在您的終端機（Terminal）印出，而不是瀏覽器
// console.log('伺服器端讀取密碼:', config.dbPassword)
return { success: true }
})
|
在頁面或組件中讀取
範例放在app.vue
1
2
3
4
5
6
7
8
9
| <script setup lang="ts" >
const runtimeConfig = useRuntimeConfig()
// 讀取公開變數（客戶端與伺服器皆可見）
console.log('讀取公開變數（客戶端與伺服器皆可見）',runtimeConfig.public.apiBaseUrl)
console.log('伺服器端讀取密碼:',runtimeConfig.dbPassword)
</script>
|