vue3+vite 實現.env全局配置

首先創建.env文件

VUE_APP_BASE_API='http://127.0.0.1/dev-api'

然后引入依賴:

pnpm install dotenv --save-dev

引入完成后,在vite.config.js配置文件內加入以下內容:

const env = dotenv.config({ path: './.env' }).parsed

define: {

? ? // 將環境變量注入到全局變量中

? ? 'process.env': env

? },

const env = dotenv.config({ path: './.env' }).parsedexport default defineConfig({plugins: [vue()],define: {// 將環境變量注入到全局變量中'process.env': env}
})

這樣就配置完成了,然后在js內process.env.VUE_APP_BASE_API就可以直接獲取到數據了。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/77244.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/77244.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/77244.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Oracle 19c部署之手工建庫(四)

#Oracle #19c #手工建庫 手工創建Oracle數據庫(也稱為手工建庫)是指在已經安裝了Oracle數據庫軟件的基礎上,通過手動執行一系列命令和步驟來創建一個新的數據庫實例。這種方法與使用Database Configuration Assistant (DBCA)等工具自動創建數…

【Reading Notes】(8.3)Favorite Articles from 2025 March

【March】 雷軍一度登頂中國首富,太厲害了(2025年03月02日) 早盤,小米港股一路高歌猛進,暴漲4%,股價直接飆到52港元的歷史新高。這一波猛如虎的操作,直接把雷軍的身家拉到了2980億元&#xff0c…

【Python爬蟲基礎篇】--1.基礎概念

目錄 1.爬蟲--定義 2.爬蟲--組成 3.爬蟲--URL 1.爬蟲--定義 網絡爬蟲,是一種按照一定規則,自動抓取互聯網信息的程序或者腳本。另外一些不常使用的名字還有螞蟻、自動索引、模擬程序或者蠕蟲。隨著網絡的迅速發展,萬維網成為大量信息的載體…

C語言超詳細結構體知識

1.自定義類型:結構體的介紹 在之前的博客中,我們簡單介紹過了關于結構體的基本知識,這里我們稍微復習一下。 結構體(struct)是C語言中一種重要的復合數據類型,它允許將不同類型的數據組合成一個整體。 1.1結構體的定義 結構體使…

C++學習:六個月從基礎到就業——內存管理:new/delete操作符

C學習:六個月從基礎到就業——內存管理:new/delete操作符 本文是我C學習之旅系列的第十七篇技術文章,也是第二階段"C進階特性"的第二篇,主要介紹C中動態內存管理的核心操作符——new和delete。查看完整系列目錄了解更多…

15~30K,3年以上golang開發經驗

繼續分享最新的面經,前面發的兩篇大家也可以看看: 「坐標上海,20K的面試強度」「北京七貓,薪資25~35K,瞧瞧面試強度」 今天分享的是golang開發崗面經,要求是3年以上golang開發經驗,薪資為15~3…

Python爬蟲實戰:獲取優志愿專業數據

一、引言 在信息爆炸的當下,數據成為推動各領域發展的關鍵因素。優志愿網站匯聚了豐富的專業數據,對于教育研究、職業規劃等領域具有重要價值。然而,為保護自身數據和資源,許多網站設置了各類反爬機制。因此,如何高效、穩定地從優志愿網站獲取計算機專業數據成為一個具有…

ArcPy工具箱制作(下)

在上一篇博客中,我們已經初步了解了如何制作ArcPy工具箱,包括工具箱的基本概念、準備工作、腳本編寫以及將腳本轉換為工具箱的步驟。今天,我們將繼續深入探討ArcPy工具箱的制作,重點介紹一些進階技巧和優化方法. 一、優化工具箱的…

不一樣的flag 1(迷宮題)

題目 做法 下載壓縮包,解壓,把解壓后的文件拖進Exeinfo PE進行分析 32位,無殼 扔進IDA(32位),找到main,F5反編譯 沒啥關鍵詞,ShiftF12也找不到什么有用的點 從上往下分析吧 puts(…

工程化實踐:Flutter項目結構與規范

工程化實踐:Flutter項目結構與規范 在Flutter項目開發中,良好的工程化實踐對于提高開發效率、保證代碼質量和團隊協作至關重要。本文將從項目結構、代碼規范、CI/CD流程搭建以及包管理等方面,詳細介紹Flutter項目的工程化最佳實踐。 項目結…

[Java · 初窺門徑] Java 語言初識

🌟 想系統化學習 Java 編程?看看這個:[編程基礎] Java 學習手冊 0x01:Java 編程語言簡介 Java 是一種高級計算機編程語言,它是由 Sun Microsystems 公司(已被 Oracle 公司收購)于 1995 年 5 …

1187. 【動態規劃】競賽總分

題目描述 學生在我們USACO的競賽中的得分越多我們越高興。我們試著設計我們的競賽以便人們能盡可能的多得分。 現在要進行一次競賽,總時間T固定,有若干類型可選擇的題目,每種類型題目可選入的數量不限,每種類型題目有一個si(解答…

使用KeilAssistant代替keil的UI界面

目錄 一、keil Assistant的優勢和缺點 二、使用方法 (1)配置keil的路徑 (2)導入并使用工程 (3)默認使用keil自帶的ARM編譯器而非GUN工具鏈 一、keil Assistant的優勢和缺點 在日常學…

【React】通過 fetch 發起請求,設置 proxy 處理跨域

fetch 基本使用跨域處理 fetch 基本使用 在node使用原生ajax發請求:XMLHttpRequest()1.獲取xhr對象 2.注冊回調函數 3.設置參數,請求頭 4.發起連接原生ajax沒有帶異步處理 promise;原生ajax封裝一下,以便重復調用jQuery&#…

Redis(二) - Redis命令詳解

文章目錄 前言一、啟動Redis并進入客戶端1. 啟動Redis2. 進入Redis客戶端3. 使用IDEA連接Redis 二、查看命令幫助信息1. 查看所有命令2. 查看指定命令幫助 三、鍵操作命令1. set命令2. mset命令3. keys命令4. get命令5. mget命令6. dump命令7. exists命令8. type命令9. rename命…

【Qt】初識Qt(二)

目錄 一、顯示hello world1.1 圖形化界面1.2 寫代碼 二、對象樹三、使用輸入框顯示hello world四、使用按鈕顯示hello world 一、顯示hello world 有兩種方式實現hello world: 通過圖形化界面,在界面上創建出一個控件,顯示hello world通過寫…

空調制冷量和功率有什么關系?

空調的制冷量和功率是衡量空調性能的兩個核心參數,二者既有區別又緊密相關,以下是具體解析: 1. 基本定義 制冷量(Cooling Capacity)指空調在單位時間內從室內環境中移除的熱量,單位為 瓦特(W) 或 千卡/小時(kcal/h)。它直接反映空調的制冷能力,數值越大,制冷效果越…

【prometheus+Grafana篇】Prometheus與Grafana:深入了解監控架構與數據可視化分析平臺

💫《博主主頁》:奈斯DB-CSDN博客 🔥《擅長領域》:擅長阿里云AnalyticDB for MySQL(分布式數據倉庫)、Oracle、MySQL、Linux、prometheus監控;并對SQLserver、NoSQL(MongoDB)有了解 💖如果覺得文章對你有所幫…

基于n8n的AI應用工作流原理與技術解析

基于n8n的AI應用工作流原理與技術解析 在AI技術深度融入企業數字化轉型的今天,開源工作流自動化工具n8n憑借其靈活的架構和強大的集成能力,成為構建智能自動化流程的核心引擎。本文將從技術原理、AI融合機制、典型應用場景三個維度,解析n8n在…

經濟指標學習(二)

系列文章目錄 文章目錄 系列文章目錄1、市凈率**一、定義與計算****二、核心意義****三、應用場景****四、局限性****五、分類與衍生指標****總結** 2、市銷率**一、定義與計算****二、核心意義****三、優缺點分析****四、適用場景****五、與其他指標的對比****六、實際應用案例…