vue 构建环境切换脚本

前言

在项目开发一直到上线的过程中,我们一般会配置至少三个环境( 开发环境dev、测试环境test、生产环境prod ) ,多则还有situat等环境,不同的环境其配置也是不一样的,比如接口地址、路由模式等配置,如何更加优雅灵活地切换环境呢?我们可以配合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.jsbuild节点配置,修改如下:

    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

价值源于技术,贡献源于分享 | 笔记分享归档
No matter where I am, I will reply you immediately when I see the email.
My Email: echo "YUBzYW1lZ28uY29tCg==" | base64 -d
个人比较喜欢分享,若有不对的地方非常感谢指出
相互学习、共同进步~

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!