技術標籤：前端工程化Vuevuenode.jswebpack前端html

前端工程化(1)：process.env環境的使用

這裡是一個簡易的例子

0

在前端工程化中，我們需要根據開發環境還是生產環境來進行判斷某些函式是否執行、某些欄位是否變化。簡單來說就是環境變數

1 簡單的例子

一個最簡單的例子，從vue-template-admin的vue.config.js某一行來說.

const port = process.env.port || process.env.npm_config_port || 9528 // dev port

這個賦值語句賦值了訪問埠宣告 process.env.port

2.process.env

process是什麼？這是node官方文件給出的：

process 物件是一個全域性變數，提供了有關當前 Node.js 程序的資訊並對其進行控制。 作為全域性變數，它始終可供 Node.js 應用程式使用，無需使用 require()。 它也可以使用 require() 顯式地訪問。

process.env的解釋:

process.env 屬性會返回包含使用者環境的物件

3.vue/cli中的使用

一個vue專案中有三個模式 ：

• development 用於 vue-cli-service serve 開發環境
• production 用於vue-cli-service build 生產環境
• test 用於vue-cli-service test 測試環境

vue-cli中還有對應的 環境檔案

當執行 vue-cli-service 命令時，所有的環境變數都從對應的環境檔案中載入。如果檔案內部不包含 NODE_ENV 變數，它的值將取決於模式，例如，在 production 模式下被設定為 “production”，在 test 模式下被設定為 “test”，預設則是 “development”。

我們先在vue.config.js中的同級檔案中建立:.env.production

#.env.development
# 定義一個環境變數
FOO = 'chj-dev'

#env.production
# 定義一個環境變數
FOO = 'chj-pro'

在 新建立好的vue腳手架專案中 更新vue.config.js

const env = process.env.NODE_ENV || "noENV here"
const foo = process.env.FOO || "no FOO here"
console.log(env, foo)

現在我們執行 npm run serve:

現在我們執行 npm run build:

可以看到相應的環境變數已經輸出。以後的專案可以由此來判斷真減條件、變更變數
。
這裡是一個簡易的例子