vue3+vite中開發環境與生產環境全局變量配置的方法

這篇文章主要介紹“vue3+vite中開發環境與生產環境全局變量配置的方法”，在日常操作中，相信很多人在vue3+vite中開發環境與生產環境全局變量配置的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3+vite中開發環境與生產環境全局變量配置的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、開發環境和生產環境

開發環境：也就是編碼時運行的環境，即我們使用npm run dev或者npm run serve運行項目到本地時，項目處于的環境。

生產環境：項目部署到服務器上后處于的環境，我們使用npm run build將項目打包以后，再運行項目，項目就運行在生產環境中了。

對于不同的環境，我們可以配置不同的環境變量，來實現開發和生產的兼容。

例如：

開發環境時，我們可以請求自己本地的接口（‘/api’ proxy代理）。

而部署到服務器上后，應該請求服務器提供的接口（‘http://xxxxxx/api/’ 真實接口）。

我們通過設置axios的baseUrl可以實現，但是需要區分開發環境和生產環境，從而改變baseUrl。

二、配置環境變量

在項目根目錄下（與package.json同級）新建兩個配置文件：

.env.development：開發環境下的配置文件,執行npm run dev命令，會自動加載.env.development文件.

.env.production：生產環境下的配置文件,執行npm run build命令，會自動加載.env.production文件

.env.development文件：

ENV = 'development'

VITE_BASE_URL='/api'

.env.production

ENV = 'production'

VITE_BASE_URL = 'http://xxxxxx/api/'

這里的VITE_BASE_URL是項目上線后需要請求的服務器接口。

三、使用全局變量

與vue-cli引用不同，vue-cli引用為：

process.env.變量名

而vite引用為:

import.meta.env.變量名

在配置axios時使用全局baseUrl:

const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,
    timeout: 5000
})

到此，關于“vue3+vite中開發環境與生產環境全局變量配置的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！