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: './',