在vue項(xiàng)目中配置你自己的啟動(dòng)命令和打包命令方式
配置自己的啟動(dòng)命令和打包命令
在開(kāi)發(fā)中，通常會(huì)需要和后臺(tái)做一些開(kāi)發(fā)調(diào)試， 本地開(kāi)發(fā)， 和線(xiàn)上觀(guān)測(cè)
這時(shí) 如何用一套代碼 加上 幾個(gè)命令來(lái)輕松的做到這些？
準(zhǔn)備
首先除vue項(xiàng)目外 我們還需要安裝幾個(gè)額外的包來(lái)幫助我們
這只是在 vue-cli2 中的配置 當(dāng)然 vue-cli3 也可以通過(guò)如下方法來(lái)配置一些環(huán)境
npm i cross-env shelljs -D
cross-env可以幫助我們更好的來(lái)使用更好的來(lái)使用 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)用到你需要的開(kāi)發(fā)中
接下來(lái)我們需要改變一下 package.json 里 script 中的命令
示例
// NODE_URL=DEV process.env的變量， 用來(lái)知道你當(dāng)前所在環(huán)境
// node build/config.url.js 啟動(dòng)shell文件來(lái)將你的環(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)目還要不同的命令來(lái)啟動(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è)模塊的描述文件，被稱(chēng)為package.json。
2.找到對(duì)應(yīng)的配置項(xiàng)，修改為自己需要的
找到“vue-cli-service serve”值所對(duì)應(yīng)的鍵名，修改為自己需要的就可以了
dev對(duì)應(yīng)的是npm run dvserve對(duì)應(yīng)的是npm run serve命令
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2仿淘寶實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue2仿淘寶實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
今天小編就為大家分享一篇解決VUE雙向綁定失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
詳解vue項(xiàng)目打包后通過(guò)百度的BAE發(fā)布到網(wǎng)上的流程
這篇文章主要介紹了將vue的項(xiàng)目打包后通過(guò)百度的BAE發(fā)布到網(wǎng)上的流程,主要運(yùn)用的技術(shù)是vue+express+git+百度的應(yīng)用引擎BAE。需要的朋友可以參考下2018-03-03
基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)
這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出報(bào)表至excel表格的三種方式,導(dǎo)出報(bào)表是實(shí)際開(kāi)發(fā)的常見(jiàn)功能,前后端都可以實(shí)現(xiàn)表格導(dǎo)出,本文介紹的是用vue實(shí)現(xiàn),需要的朋友可以參考下2023-09-09
el-table實(shí)現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個(gè)el-table,這樣數(shù)據(jù)格式就沒(méi)問(wèn)題了,主要就是樣式,將共同的列放到一列中,通過(guò)渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來(lái),本文給大家分享el-table實(shí)現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧2024-02-02
vue中數(shù)據(jù)綁定值(字符串拼接)的幾種實(shí)現(xiàn)方法
這篇文章主要介紹了vue中數(shù)據(jù)綁定值(字符串拼接)的幾種實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue3中實(shí)現(xiàn)虛擬列表組件的相關(guān)知識(shí),包含加載更多以及l(fā)oading狀態(tài),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-10-10
前端開(kāi)發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個(gè)項(xiàng)目中我們經(jīng)常需要使用多個(gè)圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開(kāi)發(fā)效率。感興趣的可以閱讀一下本文2023-04-04
Vue PC端實(shí)現(xiàn)掃碼登錄功能示例代碼
目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP，如微信，淘寶等，通過(guò)使用手機(jī)APP上的掃一掃功能去掃頁(yè)面二維碼圖片進(jìn)行登錄，使得用戶(hù)登錄操作更方便，安全，快捷，這篇文章主要介紹了Vue PC端如何實(shí)現(xiàn)掃碼登錄功能,需要的朋友可以參考下2023-01-01