在vue項目中配置你自己的啟動命令和打包命令方式

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

這篇文章主要介紹了在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 導(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的變量， 用來知道你當前所在環(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" ?//一個啟動命令