前端区分打包环境

素颜马尾好姑娘i 2022-09-14 03:07 198阅读 0赞

## 一、安装cross-env ##

### cnpm install --save-dev cross-env ###

通过cross-env这个插件我们能够跨平台设置环境变量.那么我们怎么来区分到底是生产环境、预生产环境还是测试环境

## 二、配置各个环境的参数 ##

这里我们vue项目脚手脚版本是2.0 在config/文件夹，我们逐一添加pre.env.js\\prod.env.js\\test.env.js三个js文件，作为区分环境的依据

//config/pre.env.js
     'use strict'
    module.exports = {
      NODE_ENV: '"prepare"',
      ENV_CONFIG:'"pre"',
      //接口地址
      API:'"//pre/api"'
    }

//config/prod.env.js
    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      ENV_CONFIG:'"prod"',
      API:'"//prod/api"'
    }

'use strict'
    //config/test.env.js
    module.exports = {
      NODE_ENV: '"test"',
      ENV_CONFIG:'"test"',
      API:'"//test/api"'
    }

这里可以修改config/dev.env.js来区分本地环境地址

'use strict'
    //config/dev.env.js
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
     
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API:'"//dev/api"'
    })

### 三、修改package.json文件 ###

新增打包命令

"scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
        "build:test": "cross-env NODE_ENV=test env_config=test node build/build.js",
        "build:pre": "cross-env NODE_ENV=prepare env_config=pre node build/build.js"
      },

### 四、修改config/index.js文件 ###

build: {
        //添加build参数 prod\test\pre
        prodEnv:require('./prod.env.js'),
        preEnv:require('./pre.env.js'),
        testEnv:require('./test.env.js'),
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

### 五、修改build/webpackage.prod.conf.js 调整env常量生成的方式 ###

// const env = require('../config/prod.env')
    const env = config.build[process.env.env_config+'Env']

### 六、修改build/build.js ###

'use strict'
    require('./check-versions')()
    //process.env.NODE_ENV = 'production'
     
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
     
    //注释掉添加新的
    //const spinner = ora('building for production...')
    const spinner =ora('building for '+process.env.NODE_ENV+' of '+process.env.env_config+' mode ...')
    spinner.start()

接下来就可以使用以下命令进行分别打包了

npm run build:test(打包测试地址)

npm run build:pre(打包预生产环境地址)

npm run build:prod(打包生产环境地址)