Vueの.env読み込みに必要な手順

インストールコマンド

npm install dotenv --save-dev
npm install dotenv-expand --save-dev

ファイル構成

[プロジェクトフォルダ]
│  .gitignore
│  index.html
│  output.txt
│  package-lock.json
│  package.json
│  postcss.config.js
│  README.md
│  tailwind.config.js
│  vite.config.js
│  .env
│  .env.development
│  .env.production
│  
├─node_modules
│                  
├─public
│      favicon.ico
│      
└─src
    │  App.vue
    │  firebase.js
    │  index.css
    │  main.js
    │  
    ├─assets
    │      base.css
    │      logo.svg
    │      main.css
    │      
    ├─components
    │  │  Login.vue
    │  │  UserList.vue
    │  │  
    │  ├─icons
    │  │      IconCommunity.vue
    │  │      IconDocumentation.vue
    │  │      IconEcosystem.vue
    │  │      IconSupport.vue
    │  │      IconTooling.vue
    │  │      
    │  └─__tests__
    │          HelloWorld.spec.js
    │          
    ├─router
    │      index.js
    │      
    ├─services
    │      api.js
    │      
    ├─stores
    │      RecodeList.js
    │      
    └─views
            AboutView.vue
            Dashboard.vue
            Googale_Login.vue
            SideBar.vue
            styles.css

.env.development (npm run dev で実行したときに優先して読み込む)

.env.production　(本番環境で読み込む .env ファイル)

「.envファイルの内容の例」

VITE_API_URL=http://localhost:8000/
VITE_API_HOME=http://localhost:3000
VITE_GET_RECODE=recode

変更前の【vite.config.js】

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // Use Node.js compatible syntax
    },
  },
});

変更後の【vite.config.js】

import { defineConfig, loadEnv } from "vite"; 
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig(({ mode }) => {
  // .envファイルの内容を読み込む
  const env = loadEnv(mode, process.cwd());

    // 環境変数を出力して確認
    console.log('VITE_API_URL:', env.VITE_API_URL);
    console.log('VITE_GET_RECODE:', env.VITE_GET_RECODE);

    return {
      plugins: [vue()],
      root: "./src",
      envDir: '../',  // これを追加
      build: {
        outDir: "../dist",
        rollupOptions: {
          input: path.resolve(__dirname, "src/index.html"),
        },
      },
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
      define: {
        '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false,
      },
      server: {
        // サーバーの設定（例: ポートやプロキシ）を必要に応じて追加
      },
      test: {
        globals: true,
        environment: "jsdom",
      },
    };
  });

ポイント①

以下の内容は、フォルダの構成によって調整すること
envDir: '../', 　これはルートが「src/index.html」になった場合に必要

      root: "./src",
      envDir: '../',  // これを追加

ポイント②

以下の内容は、絶対パスの位置を設定するコード
src/ の直下に index.html が無いとエラーが起きる

        rollupOptions: {
          input: path.resolve(__dirname, "src/index.html"),
        },