配置自己的啟動(dòng)命令和打包命令

在開發(fā)中，通常會(huì)需要和后臺(tái)做一些開發(fā)調(diào)試， 本地開發(fā)， 和線上觀測(cè)

這時(shí) 如何用一套代碼 加上 幾個(gè)命令來輕松的做到這些？

準(zhǔn)備

首先除vue項(xiàng)目外 我們還需要安裝幾個(gè)額外的包來幫助我們

這只是在 vue-cli2 中的配置 當(dāng)然 vue-cli3 也可以通過如下方法來配置一些環(huán)境

 npm i cross-env shelljs -D

• cross-env 可以幫助我們更好的來使用更好的來使用 process.env 里的指令，并且各個(gè)環(huán)境唯一化
• shelljs 可以讓我們用js在操作 shell 命令

首先建一個(gè) shell 操作的文件 如config.url.js 目的幫助我們將不同環(huán)境目錄 copy 到同一個(gè)文件中

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')
}

建一個(gè)環(huán)境文件 如下：

所有的 .env 中

module.exports = {
?? ?//... 你的配置的當(dāng)前環(huán)境 url
}

最后由 index.js 導(dǎo)出 數(shù)據(jù)

import env from './env'
export default env

到這里我們 已經(jīng)完成了環(huán)境的配置， 你可以添加你想要的各種參數(shù)配置應(yīng)用到你需要的開發(fā)中

接下來我們需要改變一下 package.json 里 script 中的命令

示例

// NODE_URL=DEV process.env的變量， 用來知道你當(dāng)前所在環(huán)境
// node build/config.url.js 啟動(dòng)shell文件來將你的環(huán)境配置文件copy到指定目錄文件中
// 你可以配置更多的環(huán)境
"scripts": {
? ? ? ? "dev": ?"cross-env NODE_URL=DEV node build/config.url.js&&&&webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ?//一個(gè)啟動(dòng)命令

vue項(xiàng)目啟動(dòng)命令的配置與切換

vue啟動(dòng)命令的切換npm run dev和npm run serve配置

使用vue-cli創(chuàng)建的vue項(xiàng)目，3.0以前的都是npm run serve

但是3.0以后默認(rèn)的命令是npm run dev

雖然他們的本質(zhì)對(duì)應(yīng)的都是 vue-cli-service serve命令

但是run serve和run dev不統(tǒng)一還是令人很不愉快的。

有時(shí)間幾個(gè)不同版本的項(xiàng)目還要不同的命令來啟動(dòng)。

修改方法

1.找到項(xiàng)目中的 package.json 文件

 Node.js項(xiàng)目遵循模塊化的架構(gòu)，當(dāng)我們創(chuàng)建了一個(gè)Node.js項(xiàng)目，意味著創(chuàng)建了一個(gè)模塊，這個(gè)模塊的描述文件，被稱為package.json。

2.找到對(duì)應(yīng)的配置項(xiàng)，修改為自己需要的

找到“vue-cli-service serve”值所對(duì)應(yīng)的鍵名，修改為自己需要的就可以了

• dev對(duì)應(yīng)的是npm run dv
• serve對(duì)應(yīng)的是npm run serve命令

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。