vue 構建環境切換指令碼

前言

在專案開發一直到上線的過程中，我們一般會配置至少三個環境( 開發環境dev、測試環境test、生產環境prod ) ，多則還有sit、uat等環境，不同的環境其配置也是不一樣的，比如介面地址、路由模式等配置，如何更加優雅靈活地切換環境呢？我們可以配合cross-env，構建不同的cli build script。

使用

• 安裝cross-env依賴

  npm install cross-env --save

• 分別宣告不同環境的配置，比如介面地址API_HOST

  • 開發環境配置，位於/config/dev.env.js

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    module.exports = merge(prodEnv, {
    NODE_ENV: '"development"', 
    API_HOST:'"http://dev.api.samego.com"'
    })

  • 測試環境配置，位於/config/test.env.js

    'use strict'
    const merge = require('webpack-merge')
    const devEnv = require('./dev.env')
    module.exports = merge(devEnv, {
    NODE_ENV: '"testing"',
    API_HOST:'"http://test.api.samego.com"'
    })

  • 生產環境配置，位於/config/prod.env.js

    'use strict'
    const merge = require('webpack-merge')
    const devEnv = require('./dev.env')
    module.exports = merge(devEnv, {
    NODE_ENV: '"testing"',
    API_HOST:'"http://test.api.samego.com"'
    })

• 修改vue專案的index.js的build節點配置，修改如下:

  build: {
    // 宣告環境，根據引進不同的環境檔案 | add lines
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    devEnv: require('./dev.env'),
  }

• 修改build下的webpack.prod.conf.js配置，修改如下：

  ... ... 
  // const env = process.env.NODE_ENV === 'testing'
  //   ? require('../config/test.env')
  //   : require('../config/prod.env')
  
  const env = config.build[process.env.env_config + 'Env']
  ... ...

• 修改build下的build.js配置，修改如下：

  ... ...
  // process.env.NODE_ENV = 'production'
  ... ...
  // const spinner = ora('building for production...')
  var spinner = ora('building for ' + process.env.NODE_ENV + ' ...')
  ... ...

• 在package.json配置檔案裡宣告並自定義構建指令

  "scripts": {
    "build-test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

• 新建承載構建時不同環境的配置環境配置檔案，/src/config/application.js

  // 介面地址環境
  export const API_HOST = process.env.API_HOST

• 嗯嗯~此步驟可以根據不同的指令構建不同環境...

  # 開發時使用
  npm run dev
  
  # 測試環境構建
  npm run build-test
  
  # 生產環境構建
  npm run build-prod

本作品採用《CC 協議》，轉載必須註明作者和本文連結