vite与xcode环境变量配置记录详解

npm run dev

//开发环境
touch .env.dev
//生产环境
touch .env.prod

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

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

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

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: "./ ", //生产环境路径
        proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
        // 正则表达式写法
        '^/api': {
        target: baseUrl, // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
        }
     }
   },
   plugins: [vue()]
  }
})

loadEnv(mode, process.cwd())

VITE_BASE_URL = 'https://dev.com'

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

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

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

-D'BASEURL=@"${BASE_URL}"'

#define URL BASEURL