Vue項(xiàng)目分環(huán)境打包的實(shí)現(xiàn)步驟
在項(xiàng)目開發(fā)中，我們的項(xiàng)目一般分為開發(fā)版、測試版、Pre版、Prod版。Vue-cli的默認(rèn)環(huán)境一只有dev和prod兩個(gè)，之前每次要發(fā)布測試版或Pre版都是修改了源碼中API地址后打包，這樣很麻煩。如果能根據(jù)不同環(huán)境打包就完美了。網(wǎng)上搜集了許多資料，現(xiàn)在可以分環(huán)境打包程序了，至于怎么打，接著住下看吧。
第1步：安裝cross-env
在項(xiàng)目目錄下運(yùn)行如下命令安裝cross-env，我的ide是webstorm，要以直接在ide里的Terminal窗口中運(yùn)行，也可能通過windows的CMD、Linux的Terminal定位到項(xiàng)目根目錄運(yùn)行下面的命令。
npm i --save-dev cross-env
第2步：修改各環(huán)境下的參數(shù)
在config/目錄下添加test.env.js、pre.env.js。修改prod.env.js里的內(nèi)容，修改后的內(nèi)容如下：
'use strict'
module.exports = {
NODE_ENV: '"production"',
EVN_CONFIG:'"prod"',
API_ROOT:'"/apis/v1"'
}
分別對test.env.js和pre.env.js文件內(nèi)容進(jìn)修修改，修改后的內(nèi)容如下：
'use strict'
module.exports = {
NODE_ENV: '"testing"',
EVN_CONFIG:'"test"',
API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
NODE_ENV: '"presentation"',
EVN_CONFIG:'"pre"',
API_ROOT:'"/pre/apis/train"'
}
對dev.env.js文件內(nèi)容進(jìn)行修改，修改后的內(nèi)容如下。dev環(huán)境配制了服務(wù)代理，API_ROOT前的api是配制的代理地址。
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VN_CONFIG: '"dev"',
API_ROOT: '"api/apis/v1"'
})
第3步：修改項(xiàng)目package.json文件
對package.json文件中的scripts內(nèi)容進(jìn)行個(gè)性，添加上新定義的幾種環(huán)境的打包過程，里的參數(shù)與前面的調(diào)協(xié)保持一致。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
在這里，NODE_ENV最好都設(shè)成production，因?yàn)樵趗tils.js只做了production一種判定，親測不會(huì)影響各環(huán)境API參數(shù)。 ##第4步：修改config/index.js
修改config/index.js文件中build參數(shù)，這里的參數(shù)會(huì)在build/webpackage.prod.conf.js中使用到
build:{
// Template for index.html
// 添加test pre prod 三處環(huán)境的配制
prodEnv: require('./prod.env'),
preEnv: require('./pre.env'),
testEnv: require('./test.env'),
//下面為原本的內(nèi)容，不需要做任何個(gè)性
index:path.resolve(__dirname,'../dist/index.html'),
第5步：在webpackage.prod.conf.js中使用構(gòu)建環(huán)境參數(shù)
對build/webpackage.prod.conf.js文件進(jìn)行修改，調(diào)整env常量的生成方式。
// 個(gè)性env常量的定義
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
第6步：調(diào)整build/build.js
刪除process.env.NODE_ENV的賦值，修改spinner的定義，調(diào)整后的內(nèi)容如下：
'use strict'
require('./check-versions')()
// 注釋掉的代碼
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定義
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它內(nèi)容，不需要做任何調(diào)整的內(nèi)容 ...
補(bǔ)充：
vue2+webpack怎樣分環(huán)境打包
今年有機(jī)會(huì)做了一個(gè)vue2的單頁面應(yīng)用的項(xiàng)目，從開發(fā)到上線經(jīng)歷了兩個(gè)環(huán)境。測試環(huán)境以及正式環(huán)境我都是跑npm run build。這兩個(gè)環(huán)境的變量當(dāng)前是不一樣的，每次打包都要去改變量，感覺有點(diǎn)小麻煩。后來參考同事的，他們項(xiàng)目里面分環(huán)境跑不同的命令，得到不同的包。例如測試環(huán)境npm run test ，正式環(huán)境 npm run build。
需在文件config/prod.env.js配置
const target = process.env.npm_lifecycle_event;
if (target == 'test') {
//測試
var obj = {
NODE_ENV: '"production"',
//post用當(dāng)前域名
API_ROOT: '""',
//數(shù)據(jù)字典
API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',
}
}else {
//線上
var obj = {
NODE_ENV: '"production"',
//post用當(dāng)前域名
API_ROOT: '""',
//數(shù)據(jù)字典
API_ROOT_DICT:'"http://gw.fdc.com.cn"',
}
}
module.exports = obj;
npm 提供一個(gè)npm_lifecycle_event變量，返回當(dāng)前正在運(yùn)行的腳本名稱，比如pretest、test、posttest等等。所以，可以利用這個(gè)變量，在同一個(gè)腳本文件里面，為不同的npm scripts命令編寫代碼。
總結(jié)
以上所述是小編給大家介紹的Vue項(xiàng)目分環(huán)境打包的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue中組件的緩存，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue解決彈出蒙層滑動(dòng)穿透問題的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇element UI upload組件上傳附件格式限制方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue中如何通過iframe方式加載本地的vue頁面，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了如何在vue3中同時(shí)使用tsx與setup語法糖，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Echarts，它是一個(gè)與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
我們在使用element-ui的時(shí)候經(jīng)常會(huì)遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
VUE3+vite項(xiàng)目中動(dòng)態(tài)引入組件與異步組件的詳細(xì)實(shí)例
在做vue3項(xiàng)目中時(shí),每次使用都需要先進(jìn)行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項(xiàng)目中動(dòng)態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下2022-09-09