亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

vuejs添加環(huán)境常量----多環(huán)境開(kāi)發(fā)打包場(chǎng)景解決方案之一

arashicage / 3164人閱讀

摘要：更新目前已經(jīng)提供環(huán)境變量配置了，建議直接使用。前言構(gòu)建的項(xiàng)目沒(méi)有標(biāo)配的環(huán)境依賴(lài)，只區(qū)分開(kāi)發(fā)模式單元測(cè)試模式和生產(chǎn)模式。更改環(huán)境需要手動(dòng)修改解決思路利用對(duì)象，獲取啟動(dòng)進(jìn)程時(shí)的命令行參數(shù)匹配當(dāng)前開(kāi)發(fā)或生產(chǎn)的環(huán)境常量掛載到。

2018/8/24更新：
目前VUE CLI 3.0 已經(jīng)提供環(huán)境變量配置了，建議直接使用。

前言

vue-cli構(gòu)建的項(xiàng)目沒(méi)有angular-cli標(biāo)配的environments環(huán)境依賴(lài)，只區(qū)分開(kāi)發(fā)模式、單元測(cè)試模式和生產(chǎn)模式。

//config
dev.env.js
test.env.js
prod.env.js

一個(gè)項(xiàng)目的開(kāi)發(fā)調(diào)試過(guò)程肯定不止開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，由于缺少環(huán)境常量，開(kāi)發(fā)人員常常需要手動(dòng)修改BASE_URL，進(jìn)而導(dǎo)致如果項(xiàng)目存在多個(gè)環(huán)境時(shí)，多出的環(huán)境沒(méi)辦法自動(dòng)化構(gòu)建。

axios.defaults.baseURL = "http://xxx.xxx.xx.xx/" //更改環(huán)境api需要手動(dòng)修改
解決思路

利用process對(duì)象，獲取啟動(dòng)Node.js進(jìn)程時(shí)的命令行參數(shù)（process.argv）,匹配當(dāng)前開(kāi)發(fā)或生產(chǎn)的環(huán)境常量掛載到process.env。

具體實(shí)現(xiàn)

/config
添加env-config.js文件

"use strict"

const chalk = require("chalk")
/*
* 環(huán)境列表，第一個(gè)環(huán)境為默認(rèn)環(huán)境
* envName: 指明現(xiàn)在使用的環(huán)境
* dirName: 打包的路徑，只在build的時(shí)候有用
* baseUrl: 這個(gè)環(huán)境下面的api 請(qǐng)求的域名
* assetsPublicPath: 靜態(tài)資源存放的域名，未指定則使用相對(duì)路徑
* */
const ENV_LIST = [
    {
        envName: "dev",
        dirName: "dev",
        baseUrl: "http://192.168.xx.xx:8000/",
        assetsPublicPath:"./"
    },
    {
        envName: "test",
        dirName: "test",
        baseUrl: "http://192.168.xx.xx:8000/",
        assetsPublicPath: "./"
    },
    {
        envName: "pro",
        dirName: "pro",
        baseUrl: "http://webapi.xxx.com/",
        assetsPublicPath:"./"
    },

]

//獲取命令行參數(shù) http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ""
//沒(méi)有設(shè)置環(huán)境，則默認(rèn)為第一個(gè)
const HOST_CONF = HOST_ENV  ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0] 
// 把環(huán)境常量掛載到process.env.HOST_ENV方便客戶(hù)端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log選中的變量
console.log(chalk.green("當(dāng)前環(huán)境常量："))
console.log(HOST_CONF)

module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST

//build/webpack.base.conf.js 通過(guò)webpack傳入客戶(hù)端中

  plugins: [
    new webpack.DefinePlugin({
      "process.env.BASE_URL": """ + process.env.BASE_URL + """
    })
  ],
具體使用

指定開(kāi)發(fā)時(shí)的環(huán)境，默認(rèn)為dev環(huán)境，envName為config/env-config.js配置的環(huán)境常量，對(duì)應(yīng)的process.env.BASE_URL的值就是 對(duì)應(yīng)的ENV_LIST中的baseUrl

npm run dev --[envName]

指定環(huán)境打包,輸出至dist/[envName]

npm run build --[envName]

//打包測(cè)試環(huán)境

//本地調(diào)試生產(chǎn)環(huán)境

打包所有環(huán)境

/package.json “script"

 "build-all": "npm run build --dev && npm run build --test && npm run build --pro"
目前發(fā)現(xiàn)的問(wèn)題

命令行參數(shù)（process.argv）有保留關(guān)鍵字或者是被占用的，如prod,需要注意規(guī)避。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95062.html

相關(guān)文章

  • 基于vue+mint-ui的mobile-h5的項(xiàng)目說(shuō)明

    摘要：把打包的目錄修改成生產(chǎn)環(huán)境需要的目錄。是域名的配置只要統(tǒng)一配置一項(xiàng)即可，方便。旨在增強(qiáng)團(tuán)隊(duì)開(kāi)發(fā)協(xié)作提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼規(guī)范，以下規(guī)范是團(tuán)隊(duì)基本約定的內(nèi)容，必須嚴(yán)格遵循。 Vue作為前端三大框架之一，其已經(jīng)悄然成為主流，學(xué)會(huì)用vue相關(guān)技術(shù)來(lái)開(kāi)發(fā)項(xiàng)目會(huì)相當(dāng)輕松。 對(duì)于還沒(méi)學(xué)習(xí)或者還沒(méi)用過(guò)vue的初學(xué)者，基礎(chǔ)知識(shí)這里不作詳解，推薦先去相關(guān)官網(wǎng)，學(xué)習(xí)一下vue相關(guān)的基礎(chǔ)知識(shí)。 a...

    vboy1010 評(píng)論0 收藏0

  • Vue.js學(xué)習(xí)

    摘要：一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式，還描述了在中是如何和以及進(jìn)行交互的。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過(guò)向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)給父組件發(fā)送消息。這個(gè)對(duì)象必須是普通對(duì)象原生對(duì)象，及原型屬性會(huì)被忽略。 Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。 其實(shí)和Jquery一樣...

    TIGERB 評(píng)論0 收藏0

  • 架構(gòu)師之路

    摘要：因?yàn)橛脩?hù)不用在第一次進(jìn)入應(yīng)用時(shí)下載所有代碼，用戶(hù)能更快的看到頁(yè)面并與之交互。譯高階函數(shù)利用和來(lái)編寫(xiě)更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的，讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來(lái)用~~~喲吼吼,喲吼吼..... 如何無(wú)痛降低 if else 面...

    NikoManiac 評(píng)論0 收藏0

  • VueJS 開(kāi)發(fā)常見(jiàn)問(wèn)題集錦

    摘要：由于公司的前端開(kāi)始轉(zhuǎn)向，最近開(kāi)始使用這個(gè)框架進(jìn)行開(kāi)發(fā)，遇到一些問(wèn)題記錄下來(lái)，以備后用。查了一下，發(fā)現(xiàn)可能是打包或是資源引用問(wèn)題，目前該問(wèn)題還未被妥善處理，需要通過(guò)一些來(lái)解決這個(gè)問(wèn)題。為解決這個(gè)問(wèn)題，中提供了方法對(duì)象受現(xiàn) showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端開(kāi)始轉(zhuǎn)向 VueJS，最近開(kāi)始使用這...

    hedge_hog 評(píng)論0 收藏0

  • 為什么我們要做三份 Webpack 配置文件

    摘要：時(shí)至今日，已經(jīng)成為前端工程必備的基礎(chǔ)工具之一，不僅被廣泛用于前端工程發(fā)布前的打包，還在開(kāi)發(fā)中擔(dān)當(dāng)本地前端資源服務(wù)器模塊熱更新等角色，結(jié)合等代碼檢查工具，還可以實(shí)現(xiàn)在對(duì)源代碼的嚴(yán)格校驗(yàn)檢查。時(shí)至今日，Webpack 已經(jīng)成為前端工程必備的基礎(chǔ)工具之一，不僅被廣泛用于前端工程發(fā)布前的打包，還在開(kāi)發(fā)中擔(dān)當(dāng)本地前端資源服務(wù)器（assets server）、模塊熱更新（hot module repla...

    silencezwm 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<