本文主要介绍了如何在vue项目中配置自己的启动命令和包命令，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

配置自己的启动命令和打包命令，准备vue项目启动命令的配置和切换。vue npm运行开发和npm运行服务配置修改方法的启动命令切换

配置自己的启动命令和打包命令

在开发中，通常需要做一些开发调试，本地开发和与后台的在线观察。

如何用一组代码和几个命令轻松做到这一点？

准备

首先，除了vue项目，我们需要安装几个额外的包来帮助我们。

这只是vue-cli2中的配置。当然，vue-cli3也可以通过以下方式配置一些环境。

npm i跨环境外壳js -D

Cross-env可以帮助我们更好地利用process.env中的指令，每个环境中独特的shelljs允许我们用js操作shell命令。

首先建一个 shell 操作的文件 如config.url.js 目的帮助我们将不同环境目录 copy 到同一个文件中

var shell=require(' shelljs ')；

console.log('环境变量是'，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 ')

}

建一个环境文件 如下：

总之。包封/包围（动词envelop的简写）

模块.导出={

//.您的配置的当前环境url

}

最后，通过index.js导出数据

从'导入环境。/env '

导出默认环境

到目前为止，我们已经完成了环境的配置，您可以添加您想要配置的各种参数，并将其应用到您需要的开发中。

接下来，我们需要更改package.json中脚本的命令

示例

//NODE_URL=DEV process.env变量，用来了解你当前的环境。

//node build/config.url.js启动shell文件，将您的环境配置文件复制到指定的目录文件中。

//您可以配置更多的环境

脚本':{

' dev ':' cross-env node _ URL=devnodebuild/config . URL . js web pack-dev-server-online-progress-config build/web pack . dev . conf . js '//a启动命令

vue项目启动命令的配置与切换

vue启动命令的切换npm run dev和npm run serve配置

使用vue-cli创建的vue项目都是3.0之前的npm run serve。

但是3.0以后，默认命令是npm run dev。

尽管它们的本质对应于vue-cli-service serve命令

但是run serve和run dev不统一还是很不爽。

有几个不同版本的项目和不同的命令来启动。

修改方法

1.找到项目中的 package.json 文件

Node.js项目遵循模块化架构。当我们创建Node.js项目时，意味着创建了一个模块。这个模块的描述文件叫做package.json

2.找到对应的配置项，修改为自己需要的

找到与“vue-cli-service serve”的值相对应的密钥名称，并将其修改为您自己的名称。

Dev对应npm run dvserve，npm run serve命令对应它。

以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。