腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

vite與xcode環(huán)境變量配置記錄詳解

更新時(shí)間：2022年09月16日 11:06:14 作者：頭疼腦脹的代碼搬運(yùn)工

這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、vite 環(huán)境變量配置

廢話開(kāi)篇：為了方便調(diào)試及開(kāi)發(fā)自然離不開(kāi)不同的環(huán)境配置，這里簡(jiǎn)單記錄下 vite 和 xcode 的環(huán)境變量設(shè)置

1、效果

終端輸入 npm run dev

npm run dev

顯示開(kāi)發(fā)環(huán)境下的接口地址

終端輸入 npm run prod

顯示發(fā)布環(huán)境下的接口地址

2、操作：

（1）cd 進(jìn)入到當(dāng)前的項(xiàng)目文件夾

（2）分別創(chuàng)建兩個(gè)文件

//開(kāi)發(fā)環(huán)境
touch .env.dev
//生產(chǎn)環(huán)境
touch .env.prod

在工程下的目錄結(jié)構(gòu)如下：

.env.dev 文件的內(nèi)容

NODE_ENV = 'dev'
VITE_BASE_URL = 'https://dev.com'

.env.prod 文件的內(nèi)容

NODE_ENV = 'prod'
VITE_BASE_URL = 'https://prod.com'

(3) 配置 package.json，添加自定義終端指令

"scripts": {
    "dev": "vite --mode dev",
    "prod": "vite --mode prod",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
}

這里我們看到在 dev 和 prod 后面添加了 --mode 與之對(duì)應(yīng)的開(kāi)發(fā)環(huán)境標(biāo)識(shí)

（4）如何獲取程序配置環(huán)境變量

直接上代碼

import { defineConfig ,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig(({ command, mode }) => {
    let envConfig = loadEnv(mode, process.cwd());
    let baseUrl = envConfig.VITE_BASE_URL;
    return {
        resolve:{
        alias:{
        '@':resolve(__dirname,'/src'),
        }
        },
        base:'./',
        server:{
        port:3000,
        open:true,
        cors:true,
        base: "./ ", //生產(chǎn)環(huán)境路徑
        proxy: { // 本地開(kāi)發(fā)環(huán)境通過(guò)代理實(shí)現(xiàn)跨域，生產(chǎn)環(huán)境使用 nginx 轉(zhuǎn)發(fā)
        // 正則表達(dá)式寫(xiě)法
        '^/api': {
        target: baseUrl, // 后端服務(wù)實(shí)際地址
        changeOrigin: true, //開(kāi)啟代理
        rewrite: (path) => path.replace(/^\/api/, '')
        }
     }
   },
   plugins: [vue()]
  }
})

這里從 vite 模塊里獲取 loadEnv ，利用 loadEnv 方法獲取到終端在啟動(dòng)的時(shí)候帶過(guò)來(lái)的 mode，那么，通過(guò)

loadEnv(mode, process.cwd())

方法獲取相應(yīng)配置文件下的全部以 VITE 開(kāi)頭的變量，如：

VITE_BASE_URL = 'https://dev.com'

這樣，在后面的跨域請(qǐng)求處理上就可以直接根據(jù)終端命令來(lái)指定對(duì)應(yīng)的接口環(huán)境。

（5）其他的 vue 頁(yè)面如何獲取動(dòng)態(tài)環(huán)境變量，直接上代碼：

<script lang="ts" setup>
import { ref } from "vue"
var baseUrl = ref(import.meta.env.VITE_BASE_URL)
</script>
<template>
    <div>
    <div class="content-div">當(dāng)前地址：{{ baseUrl }}</div>
    </div>
</template>
<style>
.content-div {
    font-size: .17rem;
    margin-top: 1rem;
}
</style>

直接使用 import.meta.env.VITE_BASE_URL 方式來(lái)獲取不同的環(huán)境變量值。

二、xcode的環(huán)境變量如何配置

1、效果

DEBUG

RELEASE

2、操作

（1）創(chuàng)建 debug 及 release 兩個(gè) xcconfig 文件

創(chuàng)建后如圖：

（2）xcconfig 文件內(nèi)容

debug

URL_DOMAIN_NAME = /dev.com
BASE_URL = https/${URL_DOMAIN_NAME}

release

URL_DOMAIN_NAME = /prod.com
BASE_URL = https/${URL_DOMAIN_NAME}

這里需要注意 // 會(huì)被默認(rèn)理解為注釋，拆分拼接可以避免。

（3）在 xcode 下配置環(huán)境配置文件

這里需要注意的是如果工程用到了 cocopods 這里一般這里都會(huì)是 cocopods 的設(shè)置的內(nèi)容，所以，在設(shè)置新的配置項(xiàng)后需要引入 cocopods 對(duì)應(yīng)的配置文件，可以通過(guò) #include "其他配置文件路徑" 導(dǎo)入。

（4）取值

兩個(gè)方式：

第一種：在工程文件下添加如下配置