如何在vue项目中配置你自己的启动命令和打包命令

前文

在开发中，通常会需要和后台做一些开发调试，本地开发，和线上观测
这时如何用一套代码加上几个命令来轻松的做到这些？

准备

首先除vue项目外我们还需要安装几个额外的包来帮助我们
这只是在 vue-cli2 中的配置当然 vue-cli3 也可以通过如下方法来配置一些环境

 npm i cross-env shelljs -D

cross-env 可以帮助我们更好的来使用更好的来使用 process.env 里的指令，并且各个环境唯一化
shelljs 可以让我们用js在操作 shell 命令

首先建一个 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"  //一个启动命令

如何在vue项目中配置你自己的启动命令和打包命令

前文

准备

猜你喜欢