vue 环境配置（使用cross-env配置）

vue 环境配置（使用cross-env配置）

通过定义不同的打包命令， 更改项目环境变量 。

1、下载 cross-even(可跨平台设置node环境变量)

npm install cross-env --save-dev

2、package.json 文件 查询 scripts，在其中加入如下代码：（其为不同环境的打包命令，可自定义）。

    "build:qa": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

3、全局变量 process 接收打包时改变的环境变量。

3.1、在conifg文件中建立N(需要的n个环境)个文件夹（例如：test.env.js）：【为了环境变量模块化配置】

'use strict'
const merge = require('webpack-merge')
const testEnv = require('./test.env')

module.exports = merge(testEnv, {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
  BASE_API:'"https://www.baidu.com/"',
})

3.2 在config文件的 index.js 中 build模块 添加如下：

    prodEnv: require('./prod.env'),
    preEnv: require('./pre.env'),
    testEnv: require('./test.env'),

3.3 在build文件的 webpack.prod.conf文件中修改：【动态获取】

// const env = require('../config/prod.env')  //原来的
const env = config.build[process.env.env_config + 'Env']   //现在动态的

3.4 在build文件的 webpack.prod.conf文件中修改：【build时候的 log】

let spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
spinner.start()

3.5 本地测试打包：在config文件的 index.js 中 build模块 修改如下：

 assetsPublicPath: './',

4、使用：打包后全局可使用 process.env。