vue項目中配置環境變量

vue項目中配置環境變量

此篇文章是在網上看到的,項目中我采用的是第二種方式,此文章出處.

1.環境背景

項目環境一般分為開發環境，測試環境，線上環境
因為每個環境的接口域名、webpack 配置都是不同的，所以在打包構建時，我們需要區分這些環境，這時就用到了環境變量
在工作中使用到了兩種方法來區分，下面將這兩種方式一一列舉出來
技術框架是vue-cli@2.x
首先看下下面的解釋，后面會用到
< process 對象是一個全局變量，提供 Node.js 進程的有關信息以及控制進程。 因為是全局變量，所以無需使用 require()
< process.env屬性返回一個包含用戶環境信息的對象

一、process.env.npm_config_argv和webpack的插件DefinePlugin配合使用

process.env.npm_config_argv可以獲取npm命令行的參數
一般我們build時，會根據不同環境使用相應環境的接口域名，我們可以在執行build時添加參數

在package.json里面scripts的字段配置如下

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js"
}

   
   
  
  
          

  
  
 
 
         

config文件目錄如下

 |---config 啟動配置
        |---index.js 項目配置文件
        |---dev.env.js 開發環境變量
        |---test.env.js 測試環境變量
        |---prod.env.js 生產環境變量

   
   
  
  
          

  
  
 
 
         

config/dev.env.js里面的代碼如下

module.exports = {
    NODE_ENV:'"development"',
      ENV_NAME:'"development"',
      API_ROOT:'"//www.test.abc.cn"'
  }

   
   
  
  
          

  
  
 
 
         

config/test.env.js里面的代碼如下

module.exports = {
      NODE_ENV:'"production"',
       ENV_NAME:'"test"',
       API_ROOT:'"//www.test.abc.cn"'
   }

   
   
  
  
          

  
  
 
 
         

config/prod.env.js里面的代碼如下

 module.exports = {
      NODE_ENV:'"production"',
      ENV_NAME:'"production"',
      API_ROOT:'"//www.abc.cn"'
  }

   
   
  
  
          

  
  
 
 
         

config/index.js里面的代碼如下

if (process.env.ENV_NAME === 'development') {
        module.exports = require('./dev.env.js')
    } else if (process.env.ENV_NAME === 'test') {
        module.exports = require('./test.env.js')
    } else {
        module.exports = require('./prod.env.js')
    }

   
   
  
  
          

  
  
 
 
         

注意：因為是和webpack的插件DefinePlugin配合使用的，所以上面環境變量的代碼需要先寫單引號再寫雙引號
修改config/index.js文件里面部分配置如下

    var _origin = JSON.parse(process.env.npm_config_argv).original
module.exports = {
    build: {
        env: (_origin[2] && _origin[2] == '--test') ? require('./test.env') : require('./prod.env')
        ...
    },
    dev: {
        env: require('./dev.env'),
        ...
    }
}


   
   
  
  
          

  
  
 
 
         

在build/webpack.base.conf.js里面修改部分代碼如下

    var env = config.dev.env
    var webpackConfig = merge(baseWebpackConfig, {
        ...
        plugins: [
            new webpack.DefinePlugin({
            'process.env': env
            }),
            ...
        ]

   
   
  
  
          

  
  
 
 
         

在build/webpack.prod.conf.js里面修改部分代碼如下

    var env = config.build.env
    var webpackConfig = merge(baseWebpackConfig, {
        ...
        plugins: [
            new webpack.DefinePlugin({
            'process.env': env
            }),
            ...
        ]

   
   
  
  
          

  
  
 
 
         

測試環境：在終端輸入 npm run build --test
線上環境：在終端輸入 npm run build --prod

在代碼里面使用環境變量
src/api/index.js

    import axios from 'axios'
    const root = process.env.API_ROOT
    export const requestLogin = params => { 
        return axios.post(`${root}/api/jiekou`, params).then(res => res.data)
    }

   
   
  
  
          

  
  
 
 
         

二、使用cross-env配置

一般直接在package.json里面scripts的字段配置如 “build:test”:“NODE_ENV=production ENV_NAME=test node build/build.js”,
在代碼的編譯環境中可以直接process.env.ENV_NAME取到剛才設置的ENV_NAME環境變量
由於在windows平台上執行npm run build:test 時遇到NODE_ENV=production會卡住，所以cross-env就出來了,不同平台使用唯一指令，無需擔心跨平台問題

安裝cross-env包
執行npm i --save-dev cross-env

在package.json里面scripts的字段配置如下

"scripts": {
    "dev": "cross-env NODE_ENV=development ENV_NAME=DEV node build/dev-server.js",
    "start": "npm run dev",
    "build:test":"cross-env NODE_ENV=production ENV_NAME=TEST node build/build.js",
    "build:prod":"cross-env NODE_ENV=production ENV_NAME=PROD node build/build.js"
}

   
   
  
  
          

  
  
 
 
         

config文件下面的內容和上面的第一種方法里面的config配置的一樣

上面的配置完成后就可以在編譯環境中就可以使用process.env.設置的變量名 來使用了
但是如果想在執行環境中使用設置的環境變量是訪問不到的，因為process對象是提供 Node.js 進程的有關信息以及控制進程，在執行環境下是訪問不到的
所以如果在不光在編譯環境下使用還要在執行環境中使用，有一下兩個方案，下面的兩個方案都是基於上面的cross-env配置的

1.使用插件 DefinePlugin，配置如下

在dev.env.js的配置

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT:'"開發環境地址"'
 })

   
   
  
  
          

  
  
 
 
         

在build/webpack.dev.conf.js里面修改部分代碼如下

    var env = require('../config/dev.env')
    var webpackConfig = merge(baseWebpackConfig, {
        ...
        plugins: [
            new webpack.DefinePlugin({
            'process.env': env
            }),
            ...
        ]

   
   
  
  
          

  
  
 
 
         

在prod.env.js的配置

let env = process.env.ENV_NAME || "DEV";
console.log("-----------------");
console.log("當前環境：", env);
console.log("-----------------");
env = env.toUpperCase();
const configProduction = {
 // 開發環境配置
 DEV: {
 NODE_ENV: '"production"',
 API_ROOT:'"開發環境地址"',
 },
 // 測試環境配置
 DEV: {
 NODE_ENV: '"production"',
 API_ROOT:'"測試環境地址"',
 },
 // 生產環境配置
 PROD: {
 NODE_ENV: '"production"',
 API_ROOT:'"生產環境地址"'
 }
 };
module.exports = configProduction[env];

   
   
  
  
          

  
  
 
 
         

在build/webpack.prod.conf.js里面修改部分代碼如下

   const env = require('../config/prod.env')
    var webpackConfig = merge(baseWebpackConfig, {
        ...
        plugins: [
            new webpack.DefinePlugin({
            'process.env': env
            }),
            ...
        ]

   
   
  
  
          

  
  
 
 
         

這樣配置后，在執行環境中可以直接使用process.env.設置的變量名來訪問設置的環境變量
在代碼里面使用環境變量
src/api/index.js

    import axios from 'axios'
    const root = process.env.API_ROOT
    export const requestLogin = params => { 
        return axios.post(`${root}/api/jiekou`, params).then(res => res.data)
    }

   
   
  
  
          

  
  
 
 
         

2.不使用DefinePlugin插件，在業務代碼里面需要用到環境變量的地方引入import appConst from ‘/config/index’

使用的時候直接用appConst.設置的變量名
注意，使用此方法，需要將config文件夾下的各個環境配置文件里面的內容的引號去掉

如

// config/test.env.js里面的代碼如下
    module.exports = {
        NODE_ENV:'"production"',
        ENV_NAME:'"test"',
        API_ROOT:'"//www.test.abc.cn"'
    }
// 改為
    module.exports = {
        NODE_ENV:"production",
        ENV_NAME:"test",
        API_ROOT:"//www.test.abc.cn"
    }

   
   
  
  
          

  
  
 
 
         

測試環境：在終端輸入 npm run build:test
線上環境：在終端輸入 npm run build:prod

看了上面兩種方法，小伙伴覺得哪種更方便呢，個人覺得方法二用cross-env更方便，推薦使用

出處：https://blog.csdn.net/weixin_46995731/article/details/108772987