Vue3——环境变量设置以及vite中读取环境变量

一、环境变量设置

创建环境变量的配置文件


使用环境变量

console.log(import.meta.env.VITE_BASE_URL)

vite.config.ts中使用环境变量

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite'
// 引入vue等自动导入插件
import AutoImport from 'unplugin-auto-import/vite'
// 读取环境变量
// https://vitejs.dev/config/
export default defineConfig(({ mode }: any) => {
  // 就能读取到vue中的环境变量了
  console.log(loadEnv(mode, process.cwd()))
  return {
    plugins: [
      // 可以修改递归组件名称的插件
      DefineOptions(),
      vue(),
      // 自动导入插件
      AutoImport({
        imports: ['vue'],
        dts: 'src/auto-import.d.ts'
      })
    ],
    // 给bem.scss添加为全局的
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@gyk/components/src/assets/styles/bem.scss";
            @import "@gyk/components/src/assets/styles/reset.scss";
           `
        }
      }
    }
  }
})