Nuxt .env and import a js into a store - vue.js

Question

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
}
)

Answer 1

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