在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测 这时 如何用一套代码 加上 几个命令来轻松的做到这些?
首先除vue项目外 我们还需要安装几个额外的包来帮助我们 这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境
npm i cross-env shelljs -D
首先建一个 shell 操作的文件 如config.url.js 目的帮助我们将不同环境目录 copy 到同一个文件中
var shell = require('shelljs');
console.log("ENVIRONMENT VARIABLES IS",process.env.NODE_URL);
shell.rm('-rf',['./dist','./dist.*']);
if (process.env.NODE_URL === 'DEV') {
shell.cp('-R', './src/config/dev.env.js', './src/config/env.js')
}
if (process.env.NODE_URL === 'DEV_TEST') {
shell.cp('-R', './src/config/dev.prod.env.js', './src/config/env.js')
}
if (process.env.NODE_URL === 'PROD_DEV') {
shell.cp('-R', './src/config/prod.dev.env.js', './src/config/env.js')
}
if (process.env.NODE_URL === 'PROD') {
shell.cp('-R', './src/config/prod.env.js', './src/config/env.js')
}
建一个环境文件 如下:
所有的 .env 中
module.exports = {
//... 你的配置的当前环境 url
}
最后由 index.js 导出 数据
import env from './env'
export default env
到这里我们 已经完成了环境的配置, 你可以添加你想要的各种参数配置应用到你需要的开发中 接下来我们需要改变一下 package.json 里 script 中的命令
// NODE_URL=DEV process.env的变量, 用来知道你当前所在环境
// node build/config.url.js 启动shell文件来将你的环境配置文件copy到指定目录文件中
// 你可以配置更多的环境
"scripts": {
"dev": "cross-env NODE_URL=DEV node build/config.url.js&&&&webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" //一个启动命令