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

快捷導(dǎo)航

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

更新時間：2022年09月16日 11:06:14 作者：頭疼腦脹的代碼搬運工

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

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

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

1、效果

終端輸入 npm run dev

npm run dev

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

終端輸入 npm run prod

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

2、操作：

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

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

//開發(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 與之對應(yīng)的開發(fā)環(huán)境標(biāo)識

（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: { // 本地開發(fā)環(huán)境通過代理實現(xiàn)跨域，生產(chǎn)環(huán)境使用 nginx 轉(zhuǎn)發(fā)
        // 正則表達式寫法
        '^/api': {
        target: baseUrl, // 后端服務(wù)實際地址
        changeOrigin: true, //開啟代理
        rewrite: (path) => path.replace(/^\/api/, '')
        }
     }
   },
   plugins: [vue()]
  }
})

這里從 vite 模塊里獲取 loadEnv ，利用 loadEnv 方法獲取到終端在啟動的時候帶過來的 mode，那么，通過

loadEnv(mode, process.cwd())

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

VITE_BASE_URL = 'https://dev.com'

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

（5）其他的 vue 頁面如何獲取動態(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 方式來獲取不同的環(huán)境變量值。

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

1、效果

DEBUG

RELEASE

2、操作

（1）創(chuàng)建 debug 及 release 兩個 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}

這里需要注意 // 會被默認理解為注釋，拆分拼接可以避免。

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

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

（4）取值

兩個方式：

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