vue+vite--怎么获取.env数据

207 阅读2分钟

request.js(其他js文件)中怎么获取.env数据import.meta.env

const baseUrl = import.meta.env.VITE_BASE_URL

app.vue中怎么获取.env数据import.meta.env

<script setup>

const baseUrl = import.meta.env.VITE_BASE_URL

//const title = ref(import.meta.env.VITE_BASE_URL)
</script>

vite.config.js中怎么获取.env数据loadEnv(mode, process.cwd(), '')

import { loadEnv } from 'vite'
export default (config) => {
     const viteEnv = loadEnv(config.mode, process.cwd())
     const { VITE_BASE_URL } = viteEnv
     return {
          base: VITE_BASE_URL,
     }
}

vite.config.js

vite默认不加载.env文件,会在执行完vite配置后才确定加载哪个,如果需要在vite.config.js中读取参数值,需要以下操作,通过const env = loadEnv(mode, process.cwd(), '')获取.env信息

import { loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path' //
// https://vitejs.dev/config/
export default (config) => {
    const viteEnv = loadEnv(config.mode, process.cwd())
    const { VITE_BASE_URL } = viteEnv
    return {
        plugins: [vue()],
        base: VITE_BASE_URL,
        resolve: {
            alias: {
                '~': path.resolve(__dirname, './'), // 设置路径
                '@': path.resolve(__dirname, 'src'), // 设置别名
            },
            extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
        },
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@use "./src/styles/element.scss" as *;`,
                },
            },
        },
        server: {
            port: 5173,
            host: true,
            hmr: true,
            watch: {
                usePolling: true, // 修复HMR热更新失效
            },
            open: true, //是否自动在浏览器打开
            proxy: {
                '/child-web': {
                    target: 'http://localhost:8080',
                    pathRewrite: {
                        '^/child-web': '/child-web',
                    },
                    changeOrigin: true,
                }
            },
        },
    }
}

config:


{
  mode: 'development',
  command: 'serve',
  isSsrBuild: false,
  isPreview: false
}

viteEnv:

.evn中的参数命名必须加VITE_

{
     VITE_EVN: 'development',
     VITE_BASE_URL: '/config-web/',
}

vite.config.ts

/*
 * @Author: yangmiaomiao
 * @Date: 2024-06-15 16:58:07
 * @LastEditors: yangmiaomiao
 * @LastEditTime: 2024-07-01 14:34:40
 * @Description:
 */
import { type ConfigEnv, type UserConfigExport, defineConfig, loadEnv } from 'vite'
import * as path from 'path'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'
// https://vitejs.dev/config/
export default (config: ConfigEnv): UserConfigExport => {
    const viteEnv = loadEnv(config.mode, process.cwd())
    const { VITE_PUBLIC_PATH } = viteEnv
    console.log('viteEnv', VITE_PUBLIC_PATH, viteEnv)
    return {
        base: VITE_PUBLIC_PATH,
        plugins: [
            vue(),
            qiankun('child-web', {
                //子应用名字,与主应用注册的子应用名字保持一致
                useDevMode: true,
            }),
        ],
        resolve: {
            alias: {
                '~': path.resolve(__dirname, './'), // 设置路径
                '@': path.resolve(__dirname, 'src'), // 设置别名
            },
            extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
        },
        server: {
            host: true, //host:0.0.0.0
            open: true, //是否自动打开浏览器页面
            port: 8080, //端口号
            origin: 'http://localhost:8080', //解决静态资源加载 404 问题
            cors: true, //跨域设置 允许
            strictPort: false, //端口被占用直接退出
            // 代理配置
            proxy: {
                '/api': {
                    target: 'http://localhost:3000',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, ''),
                },
                '/eunomia-ctr': {
                    target: 'http://localhost:3000',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/eunomia-ctr/, 'eunomia-ctr'),
                },
            },
        },
    }
}