nuxt3專案自定義環境變數，typescript全域性提示

阿政想暴富發表於2024-08-27
UX變數TypeScript

最近使用nuxt3框架來寫專案，其中有一點就是 typescript 語法提示讓人鬧心，使用 vscode 編輯器，如果有語法提示進行編碼，工作效率可以提升一個檔次。本篇文章說的就是如何在 vscode 中使用 nuxt3 框架，自定義環境變數，支援 typescript 語法提示。

  • 列出當前使用的環境版本
node # 21.4.0
pnpm # 8.15.5
nuxt # 3.13.0
vue # latest
  • 建立專案命令
pnpm dlx nuxi@latest init test # test 為專案名稱

自定義環境變數：process.env

因為nuxt3自帶dotenv，所以只需要修改專案的啟動命令，給執行的專案加上自定義環境變數。

  • 新建.env.test檔案

在專案根路徑下來建立 .env.test 檔案，寫入檔案內容如下。

DATA_TEST=test
  • 使用

DATA_TEST=test
這樣就可以在 nuxt.config.ts 檔案中或者 nuxt.config.ts 引入的 指令碼檔案 使用 process.env.DATA_TEST 。

使用dotenv生成的環境變數一般都是string型別。注意，請不要再.vue中檔案使用自定義的環境變數。因為無法讀取到！

// nuxt.config.ts

console.log(process.env.DATA_TEST); // test

console.log(typeof process.env.DATA_TEST); // string

如何支援 typescript 語法提示。

我們定義了環境變數，需要配置typescript，來支援語法提示。可按照一下步驟進行配置。

  • 建立*.d.ts檔案

這裡的*代表是任意名稱的，例如本案例使用 env.d.ts 名稱。在專案根目錄下，與 nuxt.config.ts 檔案同級。內容如下：

declare namespace NodeJS {
  interface ProcessEnv {
    /**
     * 環境變數 測試資料
     */
    DATA_TEST?: string
  }
}

定義之後，在整個專案中使用 process.env 時會自動提示語法。（如果沒有顯示，請重啟編輯器，再次檢視）如圖：

vscode nuxt env示例圖1

vscode nuxt env示例圖2

如何定義全域性變數來支援 .vue 以及 .ts 檔案。

前面提到了如何寫入自定義環境變數 process.env ，但是不能直接在 .vue 檔案中使用。因為 nuxt3 分客戶端渲染，服務端渲染。像 process.env 是依賴nodejs執行環境。而vue檔案這些程式碼是需要經過打包之後在使用，所以在客戶端中process.env是無法預料的。但是可以在打包的時候對自定義全域性變數進行 宏定義 ，編譯打包之後變數生成到程式碼中即可。

  • 安裝依賴 @rollup/plugin-replace具體配置請前往檢視。
pnpm add @rollup/plugin-replace
  • 配置

因為nuxt內整合了vite手腳架，而vite本身又是支援rollup外掛的。在這裡，我們只需要在nuxt配置中，新增vite的外掛配置資訊即可。

// nuxt.config.ts
import replace from '@rollup/plugin-replace';

export default defineNuxtConfig({
  vite: {
    plugins: [
       replace({
        values: {
          __HTTPURL__: `'http://baidu.com'`, // 替換之後 為 "http://baidu.com" 字串型別
          __LOG__: `false`, // 替換之後為 false  boolean 型別
        }
      }),
    ]
  }
})
  • 使用
<!-- pages/index.vue -->
<template>
  <h1>index page</h1>
</template>

<script setup lang="ts">
const url = __HTTPURL__;
const b = __LOG__;
console.log(url, typeof url); // http://baidu.com string
console.log(b, typeof b); // false 'boolean'
</script>
  • 打包後的程式碼

因為經過@rollup/plugin-replace外掛編譯轉換後，你所用的預定義程式碼會變成定義好的。

// 假設
const url = "http://baidu.com";
const b = false;
  • typescript支援

在我們之前定義好的env.d.ts中 再次新增以下程式碼，即可做到vscodets語法提示。

// env.d.ts
declare const __HTTPURL__: string;
declare const __LOG__: boolean;

相關文章