[RESOLVIDO] Variáveis de ambiente usando Vite - VueJS

Front-end
#1 
import type { TemaStateProps } from '@/types/apps/TemaType';
import axios from '@/utils/axios';
import { defineStore } from 'pinia';

export const useTemaStore = defineStore({
    id: 'analiseTema',
    state: (): TemaStateProps => ({
        temas: []
    }),
    getters: {},
    actions: {
        async fetchTemas() {
            try {
                console.log('server - temas');
                console.log(process.env.VUE_APP_BACKEND_URL + '/api/analise/listatemas')
                const data = await axios.get(process.env.VUE_APP_BACKEND_URL + '/api/analise/listatemas');
                this.temas = data.data;
            } catch (error) {
                console.log(error);
            }
        }
    }
});

package.json

{
  "name": "teste",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port 5050",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@tiptap/pm": "^2.0.0-beta.220",
    "@tiptap/starter-kit": "2.0.0-beta.220",
    "@tiptap/vue-3": "2.0.0-beta.220",
    "@types/aos": "^3.0.4",
    "aos": "^2.3.4",
    "apexcharts": "3.36.3",
    "axios": "^0.27.2",
    "axios-mock-adapter": "^1.21.2",
    "chance": "^1.1.8",
    "date-fns": "^2.29.3",
    "keycloak-js": "^22.0.4",
    "lodash": "^4.17.21",
    "maska": "^1.5.0",
    "pinia": "2.0.11",
    "remixicon": "2.5.0",
    "svgmap": "^2.10.1",
    "v-calendar": "3.0.0-alpha.8",
    "vee-validate": "4.6.7",
    "vite-plugin-vuetify": "1.0.2",
    "vue": "3.2.31",
    "vue-clipboard3": "^2.0.0",
    "vue-draggable-next": "^2.2.1",
    "vue-i18n": "^9.2.2",
    "vue-router": "4.0.12",
    "vue-scrollto": "^2.20.0",
    "vue-tabler-icons": "2.9.0",
    "vue3-apexcharts": "1.4.1",
    "vue3-carousel": "^0.2.9",
    "vue3-easy-data-table": "^1.4.19",
    "vue3-perfect-scrollbar": "1.6.0",
    "vue3-print-nb": "^0.1.4",
    "vue3-recaptcha-v2": "1.0.1",
    "vuedraggable": "^2.24.3",
    "vuetify": "3.3.3",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@mdi/font": "^6.5.95",
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/chance": "^1.1.3",
    "@types/node": "^16.11.25",
    "@vitejs/plugin-vue": "4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/tsconfig": "^0.1.3",
    "esbuild": "^0.17.5",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0",
    "prettier": "^2.5.1",
    "sass": "^1.49.9",
    "sass-loader": "^10.0.0",
    "typescript": "~4.5.5",
    "vite": "4.1.1",
    "vue-cli-plugin-vuetify": "2.5.5",
    "vue-tsc": "1.0.3",
    "vuetify-loader": "^2.0.0-alpha.9"
  }
}

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "allowJs": true,
    "types": ["node"],
  },
  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

tsconfig.vite-config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*"],
  "compilerOptions": {
    "composite": true,
    "allowJs": true,
    "types": ["node"]
  }
}

image
image1035×933 47 KB

image
image791×163 7.43 KB

image

O que falta para pegar o env

#2

Vi que vc tá usando o Vite.

Então tem que usar import.meta.env ao invés de process.env.

E as variáveis lá no seu .env precisam começar com VITE_.

Ex::

 VITE_HOST=127.0.0.1

Código

 const host = import.meta.env.VITE_HOST

————

Ref: Env Variables and Modes | Vite

1 curtida
#3

image

image

Estes erros agora

#4

Mas aí tá undefined pq vc tem que debugar dps q passa da linha, bota um console log após declarar essa const URL.

(Como vc tá com o debug em cima da linha, é normal que esteja undefined, nada foi atribuído pra url, se vc descer a linha do debug vai ver a atribuição)

———

O erro que deu no VSCode parece coisa de lint, oq tá falando?

1 curtida
#5

Consegui
O nome estava errado

const url = import.meta.env.VITE_APP_BACKEND_URL;

Assim funcionou.

1 curtida