I'm using thevue-cli 2.8.1 with a full-featured webpack template. I have a component that needs access to the environment variable in order to display different content for either dev or prod environments. How would you get access to this variable?
It's much easier than I thought.
One can access the env variable from anywhere in the app code.
console.log(process.env.NODE_ENV) //production || development
Related
I have a Vue.js app hosted by AWS Amplify.
In Vue, env vars can be set application-wide by using .env. files.
I currently use such files for development and for production modes, containing different values.
When locally building and serving my application the above works as expected. However, once Amplify deploys my app (in my case I use Amplify's CD feature), these variables are not defined.
I know I can define the same env vars in Amplify, but that would mean I need to manage these values in two places since won't be redeploying while developing. so this seems to be prone to errors (I will need to remember to update the vars on both the application end and amplify console whenever I need to make a change for example).
I wonder if this behavior is expected or is there something I am missing in my setup.
Thanks!
I was also facing the same issue in my React app.
The thing is, you need to have a .env file in your app with all the environment variables.
Why? — The reason behind that is, it generates static HTML, CSS and JS files. Those files can't access process during the runtime.
After adding all the environment variables in Amplify, you have to add one more command in your build stage in App build specification.
You can refer to this official documentation on how to implement this.
If you don't care much about your environment variables, you can use this hack: printenv. This will store all the environment variables of your OS and your application in the .env file.
My config looks something like this:
build:
commands:
- 'printenv >> .env'
- 'npm run build'
I want my web app, that's built with Nuxt.js and Vue.js to access the environment variables that I added in the Netlify environment UI (setting menu).
When I run the local server I have no problem with my code accessing the .env file and retrieving the right codes.
But when I build it with Netlify, it returns undefined.
I have tried adding different prefixes to the env variables since I saw some people do this:
VUE_APP_MY_VARIABLE
NUXT_APP_MY_VARIABLE
VUE_MY_VARIABLE
NUXT_MY_VARIABLE
I do not understand why the variables can not be accessed when the site is live.
If you're missing any information, let me know and I will add it.
Thanks in advance!
Maybe this page can help you!
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env
Try:
NUXT_ENV_MY_VARIABLE
instead of
NUXT_MY_VARIABLE
I use Netlify and Nuxt together with dotenv package:
"#nuxtjs/dotenv": "1.4.1",
Is there a possibility to access environment variables through Chrome inspector?
Thank you
By default, no environment variables are exposed to the compiled client-side application.
But you can selectively include variables to your code by hand, e.g. inside HTML comments or console log outputs.
See also Vue CLI: Using Env Variables in Client-side Code:
You can access env variables in your application code:
console.log(process.env.VUE_APP_SECRET)
During build, process.env.VUE_APP_SECRET will be replaced by the corresponding value. In the case of VUE_APP_SECRET=secret, it will be replaced by "secret".
I know that you can create .env.xxxx files in vue and then run a dev, test and production builds to have environment specific environmental variables.
But what if I want to do one build and then when the app is running it could dynamically select the app config file based on the environment the app is hosted in. It's given that the host environment could have VUE_APP_ENVIRONMENT environmental variable and could use this to decide what settings to use.
What's a good way to do this?
I am wondering if there is a way to change a 'root path' for my site's api which is a string value of a variable at build time in a vue application. I would like the value of my api path to be read in during the build process and set. This functionality exists in angular, and I am wondering if it exists in vue. I have checked the docs and do not see anything similar. This blog describes the functionality that I am after in angular. If there is nothing similar how does one change the root path of an api from for example 'localhost:8080' to 'example.mysite.com' at build time so that the right path is set when building/deploying to production and not needed to be changed manually? Thanks for any help!
You could set it in an environment variable during the build and access it via process.env.MY_VARIABLE.
During development you would use a package like https://www.npmjs.com/package/dotenv and have a .env file with your environment variables but in production you would set it in your CI or build script.
Bare in mind if this is browser based then you will need to replace
process.env references with the explicit values which you can do with most bundlers.