Cannot specify url in .env file vue cli 3

Question

I'm referring to the documentation about environment variables in vue cli 3.

I'm able to set it up and get simple variables to show up but my url in the .env file doesn't show up.

Contents of the .env file:

FOO=bar
VUE_APP_SECRET=secret
API_URL="https://staging.something.org"

Here is how I'm viewing the env:

console.log(process.env)
BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_SECRET: "secret"

The API_URL is not visible, am I doing something wrong?

Cloud Soh Jun Fu · Accepted Answer · 2019-05-01 07:12:52Z

3

Refer to the documentation.

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:

Your VUE_APP_SECRET is accessible because it's prefixed with VUE_APP_. Use VUE_APP_API_URL instead of API_URL to access it in your frontend.

edited May 1, 2019 at 7:12

answered May 1, 2019 at 6:30

Cloud Soh Jun Fu

1,53211 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aks Over a year ago

Thank you so much, I just missed that somehow in the doc.

Gustavo Araújo · Accepted Answer · 2022-02-10 15:58:15Z

1

Since CLI 3, Vue recognizes variables in dotenv only when adding the prefix VUE_APP_

When making changes, restart CLI.

answered Feb 10, 2022 at 15:58

Gustavo Araújo

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Cannot specify url in .env file vue cli 3

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related