Vue中配置使用process.env詳解
vue process.env
process.env 為何物
process
是 nodejs 下的一個全局變量,它存儲著 nodejs 中進程有關的信息。
言歸正傳。 process.env 是 Node.js 中的一個環(huán)境對象。其中保存著系統(tǒng)的環(huán)境的變量信息??墒褂?Node.js 命令行工具直接進行查看。
而 NODE_ENV 就是其中的一個環(huán)境變量。這個變量主要用于標識當前的環(huán)境(生產環(huán)境,開發(fā)環(huán)境)。默認是沒有這個環(huán)境變量的,需要自己手動配置。不同系統(tǒng)有不同的環(huán)境變量配置方式,在這里就不多加贅述。
NODE_ENV 與 Vue
NODE_ENV 變量只能在系統(tǒng)中配置嗎?其實不然。在 Vue 項目中, Vue 提供了自己的配置方式。這就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文檔說明了這個問題。
也就是說,在 Vue 中, NODE_ENV 可以通過 .env 文件或者 .env.[mode] 文件配置。配置過后,運行 Vue CLI 指令( npm run dev(serve) ,npm run build )時,就會將該模式下的NODE_ENV載入其中了。而這些命令,都有自己的默認模式:
- npm run dev(serve) ,其實是運行了 vue-cli service serve ,默認模式為 development ??梢栽?.env.development 文件下修改該模式的 NODE_ENV 。
- npm run build ,其實運行了 vue-cli service build ,默認模式為 production 。
可以在 .env.production 文件下修改該模式的 NODE_ENV 。
修改方式如下,以鍵值對的方式:
除了以上的修改方式外,也可以在命令后直接使用 --mode 參數手動指定模式。當然,每個模式配置的變量也不只有 NODE_ENV , 也可以通過配置其他的變量簡化工作流程。
模式的應用
有了模式的概念,就可以根據不同的環(huán)境配置模式,就不用每次打包時都去更改 vue.config.js 文件了。比如在測試環(huán)境和生產環(huán)境, publicPath參數 (部署應用包時的基本 URL) 可能不同。遇到這種情況就可以在 vue.config.js 文件中,將 publicPath 參數設置為:
publicPath: process.env.BASE_URL
設置之后,再在各個 .env.[mode] 文件下對 BASE_URL 進行配置就行了,這樣就避免了每次修改配置文件的尷尬。其他的配置也是同理。
Tips: 即使不是生產環(huán)境,也可以將模式設置為 production ,這樣可以獲得 webpack 默認的打包優(yōu)化。
補充:vue中的process.env使用
1、在nodejs中使用
1、安裝
npm install dotenv
2、根目錄下創(chuàng)建 .env 文件
HOST = localhost PORT = 8080
3、入口文件中引入 dotenv 并使用
require("dotenv").config({path: '.env'}) console.log(process.env.HOST); // localhost console.log(process.env.PORT); // 8080
2、在vue中使用
在使用腳手架創(chuàng)建項目的時候,會自動安裝dotenv
,可以從package-lock.json
中找到配置
在main.js入口文件中打印
console.log(process.env);
可以看出,默認的模式是development
即開發(fā)模式。
模式
官網描述如下:https://cli.vuejs.org/zh/guide/mode-and-env.html
也就是說,在Vue
中, NODE_ENV
可以通過 .env
文件或者.env.[mode]
文件配置。配置過后,運行 Vue CLI 指令( npm run dev(serve) ,npm run build )
時,就會將該模式下的NODE_ENV載入其中了。而這些命令,都有自己的默認模式:
npm run dev(serve)
,其實是運行了vue-cli service serve
,默認模式為development
??梢栽?.env.development
文件下修改該模式的NODE_ENV
。npm run build
,其實運行了vue-cli service build
,默認模式為production
??梢栽?code> .env.production 文件下修改該模式的NODE_ENV
。
在根目錄下創(chuàng)建文件
NODE_ENV = production
注意:
只有 NODE_ENV
,BASE_URL
和以 VUE_APP_
開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側的代碼中。這是為了避免意外公開機器上可能具有相同名稱的私鑰。
NODE_ENV = development VUE_APP_BASE_API = 'http://localhost:8099/'
再打印 process.env
的信息如下:
注意:.env
環(huán)境文件是通過運行 vue-cli-service
命令載入的,因此環(huán)境文件發(fā)生變化,你需要重啟服務
。
除了以上的修改方式外,也可以在命令后直接使用--mode
參數手動指定模式。
到此這篇關于Vue中配置process.env詳解的文章就介紹到這了,更多相關vue process.env內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09vue、react等單頁面項目部署到服務器的方法及vue和react的區(qū)別
這篇文章主要介紹了vue、react等單頁面項目部署到服務器的方法,需要的朋友可以參考下2018-09-09vue簡單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡單封裝axios插件和接口的統(tǒng)一管理操作,結合具體實例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02Element?Table行的動態(tài)合并及數據編輯示例
這篇文章主要為大家介紹了Element?Table行的動態(tài)合并及數據編輯示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07