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

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

摘要：最近做的一個項目是配置了三個環(huán)境的正式環(huán)境測試環(huán)境和開發(fā)環(huá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"進行安裝依賴

package.json:

//這是我項目的目錄

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

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

config/develop.env.js

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

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

2.修改build.js
默認打包都是prod環(huá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云服務器不同的站點，有配置文檔不同域名的辨別不同的域名后綴不同域名的區(qū)別

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103284.html

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

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

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

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

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

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

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

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

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

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

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