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

更新时间：2022年04月02日 10:24:40 作者：yangdongnan

这篇文章主要介绍了在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项目启动命令的配置与切换

在这里插入图片描述

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 dv
serve对应的是npm run serve命令

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目配置使用flow类型检查的步骤
这篇文章主要介绍了vue项目配置使用flow类型检查的步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue.js中created()与activated()的个人使用解读
这篇文章主要介绍了vue.js中created()与activated()的个人使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue实现书本翻页动画效果实例详解
这篇文章主要介绍了vue简单实现书本翻页效果,需要的朋友可以参考下
2022-04-04
Vue Cli与BootStrap结合实现表格分页功能
这篇文章主要介绍了Vue Cli与BootStrap结合实现表格分页功能,需要的朋友可以参考下
2017-08-08
使用Vue3生成二维码和条形码详细图文教程
在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下
2024-09-09
vue项目中axios配置方式(代理配置)
这篇文章主要介绍了vue项目中axios配置方式(代理配置),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue中wangEditor5编辑器的基本使用
wangEditor是一个轻量级web富文本编辑器,配置方便,使用简单,下面这篇文章主要给大家介绍了关于vue中wangEditor5编辑器的基本使用,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
Vue列表渲染v-for的使用案例详解
这篇文章主要介绍了Vue列表渲染(v-for的使用),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
Vue3中列表拖拽排序的实现示例
本文主要介绍了Vue3中列表拖拽排序的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
尤大大新活petite-vue的实现
打开尤大大的GitHub，发现多了个叫 petite-vue 的东西,Vue3 和 Vite 还没学完呢，又开始整新东西了？本文就来介绍一下
2021-07-07