vue:不同環(huán)境配置不同的打包命令

gyl_coder 發(fā)布于2019-08-23 16:47 / 2514人閱讀

摘要：最近做的一個項目是配置了三個環(huán)境的正式環(huán)境測試環(huán)境和開發(fā)環(huán)境，下面以這個為例第一步安裝或者在中加上進(jìn)行安裝依賴這是我項目的目錄第二步修改各環(huán)境下的參數(shù)在目錄下添加。

最近做的一個項目是配置了三個環(huán)境的：正式環(huán)境、測試環(huán)境和開發(fā)環(huán)境，下面以這個為例

第一步：安裝cross-env

npm i --save-dev cross-env
或者在
package.json中加上"cross-env": "^5.0.1"進(jìn)行安裝依賴

package.json:

//這是我項目的目錄

第二步：修改各環(huán)境下的參數(shù)

在config/目錄下添加test.env.js、develop.env.js。并且修改文件里的內(nèi)容
config/prod.env.js

config/develop.env.js

第三步：更改build文件夾的東西

1.給build文件夾下增加環(huán)境文件 webpack.develop.conf.js

2.修改build.js
默認(rèn)打包都是prod環(huán)境，我這里改成了默認(rèn)是測試環(huán)境
打印是什么環(huán)境

3.修改webpack.prod.conf.js

4.修改webpack.base.conf.js
由于config/index.js配置不同的環(huán)境，靜態(tài)文件取得是不同的目錄，所以這邊要根據(jù)不同的環(huán)境取出不同的配置，如果配置一樣，那就無需區(qū)分了

config/index.js
config/index.js dev運行

config/index.js 開發(fā)環(huán)境配置

config/index.js 測試環(huán)境配置

config/index.js 正式環(huán)境配置

第四步：輸入不同的命令打包環(huán)境

"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",

"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

"build--develop": "cross-env NODE_ENV=develop env_config=develop node build/build.js"

測試環(huán)境打包： npm run build--test

正式環(huán)境打包： npm run build--prod

開發(fā)環(huán)境打包： npm run build--develop

GPU云服務(wù)器云服務(wù)器不同的站點，有配置文檔不同域名的辨別不同的域名后綴不同域名的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103284.html

相關(guān)文章

vue-cli3 配置開發(fā)-測試環(huán)境

摘要：實現(xiàn)輸入一行命令，執(zhí)行兩條指令，分別打包線上生產(chǎn)環(huán)境和線上測試環(huán)境的代碼。這樣配置好之后，只要執(zhí)行，它會自動先執(zhí)行正式環(huán)境構(gòu)建打包，完成之后再自動執(zhí)行測試環(huán)境的構(gòu)建打包，是方便接著再配置自動壓縮，這里就需要使用到一個的插件。需求首先介紹一下本項目的背景，是基于 vue-cli3.1.1 的單頁應(yīng)用，目前測試環(huán)境和生產(chǎn)環(huán)境都在線上，并且都在同一個域名下，其中生產(chǎn)環(huán)境部署在根目錄下，測...

Scott 2019-08-26 13:48 評論0 收藏0
vue實現(xiàn)分環(huán)境打包步驟（給不同的環(huán)境配置相對應(yīng)的打包命令）

在新建好的項目中，一般執(zhí)行npm run build就是打包了，但此時只能打包到一個環(huán)境，不同環(huán)境需要配置不同的地址，可以手動更改接口的地址，也可以自行配置命令而不需要每次打包進(jìn)行地址切換，步驟如下：文件結(jié)構(gòu)如下圖： showImg(https://segmentfault.com/img/bVbtsAE?w=255&h=536); 1）在config文件內(nèi)新建test.env.js文件： u...

idealcn 2019-08-23 17:56 評論0 收藏0
基于Vue-cli的一套代碼支持多個項目的解決方案

摘要：基于的一套代碼支持多個項目的解決方案應(yīng)用場景在端業(yè)務(wù)中，同樣的產(chǎn)品，客戶多多少少會要求一些定制化。那么，是否可以一套代碼支持多個項目呢前段時間，接了一個需求，技術(shù)選型是，用搭建的。在這個場景下研究了一下解決方案。基于Vue-cli的一套代碼支持多個項目的解決方案應(yīng)用場景在toB端業(yè)務(wù)中，同樣的產(chǎn)品，客戶多多少少會要求一些定制化。從皮膚，圖片，到一些小的功能的差異。前端總是沖在最前...

SQC 2019-08-22 18:22 評論0 收藏0
面試官：自己搭建過vue開發(fā)環(huán)境嗎？

摘要：在搭建過程中，還是會踩很多坑的。如果還不熟悉的話，建議自己搭建一次。開篇原文地址：www.ccode.live/lentoo/list… 前段時間，看到群里一些小伙伴面試的時候被面試官問到這類題目。平時大家開發(fā)vue項目的時候，相信大部分人都是使用 vue-cli腳手架生成的項目架構(gòu)，然后 npm run install 安裝依賴，npm run serve啟動項目然后就開始寫業(yè)務(wù)代碼...

HelKyle 2019-05-22 15:27 評論0 收藏0
基于webpack模仿vue-cli（簡略版）工程化

摘要：但高度封裝的帶來方便的同時，很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu)，以至于當(dāng)使用需要手動配置一些東西如編譯實現(xiàn)代碼壓縮，移動端適配等配置的時候往往無從下手。廢話不多說，下面我們來看看如何基于模仿實現(xiàn)項目工程化。從零搭建vue-cli 原創(chuàng)不易，如需轉(zhuǎn)載請聯(lián)系作者并注明出處 vue-cli的出現(xiàn)為vue工程化前端開發(fā)工作流提供了開箱即用的構(gòu)建配置，減輕了煩人的webpack配置流程。但高度封...

GitCafe 2019-08-26 11:35 評論0 收藏0