When I try to call .env variables from a local .env file using web-ci 3.7, they are undefined.
If I console.log process.env only
{
BASE_URL: "/",
NODE_ENV: "development"
}
are shown.
I set up an .env file in the project's root
This is how the env file looks like
VUE_APP_KEY: ******
VUE_APP_SECRET: *******
VUE_APP_TOKEN: *********
VUE_APP_BASE_URI=/api
Please try to use = instead of :
VUE_APP_KEY= ******
VUE_APP_SECRET= *******
VUE_APP_TOKEN= *********
VUE_APP_BASE_URI=/api
Related
I want to set an environment variable in github action .yaml. And I can access that variable inside my Vite project run time.
Exp:
# staging.yaml - my github action file
...
env: VITE_INTERNAL = true
...
// index.vue - my Vite project
function myTest(){
console.log(process.env.VITE_INTERNAL) // I hope to get "true" instead of "undefined"
}
Anyone can help me, please. Thanks a lot!
To set an environment variable in a GitHub Action YAML, you can use env, jobs.<job_id>.env, or jobs.<job_id>.steps[*].env:
name: Build
permissions:
contents: read
issues: read
checks: write
pull-requests: write
on: push
# 👇 global env
env:
VITE_INTERNAL: true
jobs:
build:
runs-on: ubuntu-latest
# 👇 or job-level env
env:
VITE_INTERNAL: true
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: 18.x
cache: 'npm'
- name: Install dependencies
run: npm i
- name: Build
run: npm run build
# 👇 or step-level env
env:
VITE_INTERNAL: true
To access the environment variable from JavaScript, use import.meta.env.VITE_INTERNAL (not process.env.VITE_INTERNAL).
GitHub demo
You can read the docs here, but to expose env variables, you can do it like the following.
.env
VITE_INTERNAL = true
.yaml
console.log(import.meta.env.VITE_INTERNAL)
I have a somewhat large config.js file that I have created to for config type things. I am using a .env to keep secrets and such out of my github. In my .env file I have a variable called environment that I use to determine if I am on local, dev, stage, or prod. In my config.js file I am using that to load my certs and keys, and a bunch of other variables that are dependent on which environment I am on.
In one of my Vuex Store files, when I do the following it works
import config from '#/config'
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config.developmemt
When I do the following I get 'environ is undefiend', even though I can see 'development' logged out.
import config from '#/config'
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config[process.env.enviorment]
My VueEx file...
import config from '#/config'
console.log(process.env.enviorment) // <--- This is where it loads undefined at the app.js file which is my store, but loads the value in client.js
console.log(this.app) // <----------- this.app is undefined every time.
const environ = config.developmemt
export const state = () => (
{
environment: eviron
}
)
You can use process.env only during build process. You want to use ENVs in runtime. In nuxt we have built-in ENVs handling:
https://nuxtjs.org/docs/directory-structure/nuxt-config#runtimeconfig
In .env file add your ENVs:
ENVIRONMENT=staging
In nuxt.config.js you can use process.env.ENVIRONMENT, because it will be assigned during build time:
export default {
publicRuntimeConfig: {
environment: process.env.ENVIRONMENT
},
};
Then you can get all your ENVs from publicRuntimeConfig during runtime (in vue and store files):
this.$config.environment
You can check my demo here:
https://codesandbox.io/s/nuxt-envs-hx2cw?file=/pages/index.vue
Get the value of GOOGLE_MAP_API variable in .env file into gmap-vue.js inside boot/ directory
it's working if I use the key right away like this
load: {
key: 'AIzaSyCw9Txxxxxxxxxxxxx',
...
}
but I would like to use the key coming from .env file like this process.env.GOOGLE_MAP_API
quasar.conf.js
module.exports = function (/* ctx */) {
return {
...
boot: [
'gmap-vue'
],
boot/gmap-vue.js
import Vue from "vue";
import * as GmapVue from "gmap-vue";
Vue.use(GmapVue, {
load: {
key: process.env.GOOGLE_MAP_API,
...
}
}
.env
GOOGLE_MAP_API='AIzaSyCw9Txxxxxxxxxxxxx'
it will return an error:
Google Maps JavaScript API warning: InvalidKey
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
to summarize if I get the key from process.env it gives error
I've notice that when I access a String value from process.env it always adds double quotes (").
even if there's No double quotes of the string value from .env
so what I did is I use regex;
load: {
key: process.env.GOOGLE_MAP_API.replace(/"/g, ""),
EDIT: if you guys have better answer please give, thanks
For anyone stumbling onto this more recently, there are apparently a couple ways to get environment variables into your app/boot files:
Method 1
Per the latest Quasar docs on environment variables, you can leverage the dotenv library to parse and inject your .env variables into the env object mounted in quasar.config.js:
build: {
env: require('dotenv').config().parsed
}
Now, everything in your .env file will be available in the process.env object everywhere in your app files (boot, components, modules, etc)
Method 2
If you use Vite - I found this explanation on Jason Watmore's Blog. Basically anything you prefix with VITE_ in your .env files is available on the import.meta.env object.
I did move my source directory using srcDir prop. But when I start my local server console is giving me this error:
WARN No .env file found in ~\src nuxt:dotenv 11:19:47
Have you any ideas on how to fix this?
It is necessary to specify the path to the .env file via the path option in the dotenv module declaration.
nuxt.config.js
buildModules: [
// dotenv
['#nuxtjs/dotenv', { path: './' }],
],
I created a project with Vue CLI 4.1.2, and inside router/index.js, I found:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
There is no .env file in the project root. So what does process.env.BASE_URL mean? Where is the BASE_URL value set?
process.env is a property that contains the user's environment variables in Node. The .env is an optional file that could be used in Vue CLI projects to create additional environment variables. Note that you could also create .env.production and .env.development files to set variables specific to the current build mode.
BASE_URL is an environment variable automatically set by Vue CLI when running serve or build NPM scripts. Its default value is /, but it can be configured in <projectRoot>/vue.config.js with the baseUrl (deprecated) or publicPath setting:
// vue.config.js
module.exports = {
publicPath: '/my-app/'
}