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