search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

Vue builds different environment #4950

Closed LXJSQ closed 4 years ago

LXJSQ commented 4 years ago

What problem does this feature solve?

We can't solve this problem by adding environment variables directly when differentiating different services in production environment. We need to introduce many configuration files of env. Configuration files are redundant, especially when there are multiple services across regions. So I wonder if we can add the environment variables of the production environment to the package.json scripts object when we read them in build.js. Instead of having to get it from the env file. This is more elegant and easy to maintain.

Looking forward to your reply.

Thanks.

What does the proposed API look like?

Custom environment variables in production package.json can also be identified.

haoqunjiang commented 4 years ago

This is more elegant and easy to maintain

I don't think a big, monolithic JSON configuration object like package.json is easy to maintain.

For most simple use cases, I do think .env files are clearer. For complex use cases, does it really help to put so many different configs in a single JSON object than in separate files?

If you are asking for ways to share configurations between multiple environments, then here's the answer: https://github.com/motdotla/dotenv#should-i-have-multiple-env-files

Lastly, in your use case, you can programmatically load these environment variables in vue.config.js, rather than using the .env mechanism provided by Vue CLI by default.

LXJSQ commented 4 years ago

First of all, thank you for your reply.

The reason why I mention this issue is that our two similar projects have more than 10 production environments, such as multilingualism, pressure testing, review, etc. One with react and one with Vue. It is found that react configuration can directly add environment variables in package.json, but if the project of Vue does not change the build.js in the original scaffold, it needs to refer to more than 10 env configuration files, which is very redundant in our business scenarios. So I think it's better to keep adding environment variables directly in package.json for simple configuration. I'm just a suggestion. Maybe most of the business requirements I meet are easier to add environment variables to package.json.

Thanks ------------------ 原始邮件 ------------------ 发件人: "Haoqun Jiang"<notifications@github.com>; 发送时间: 2019年12月16日(星期一) 下午4:32 收件人: "vuejs/vue-cli"<vue-cli@noreply.github.com>; 抄送: "zz"<1147292329@qq.com>;"Author"<author@noreply.github.com>; 主题: Re: [vuejs/vue-cli] Vue builds different environment (#4950)

This is more elegant and easy to maintain

I don't think a big, monolithic JSON configuration object like package.json is easy to maintain.

For most simple use cases, I do think .env files are clearer. For complex use cases, does it really help to put so many different configs in a single JSON object than in separate files?

If you are asking for ways to share configurations between multiple environments, then here's the answer: https://github.com/motdotla/dotenv#should-i-have-multiple-env-files

Lastly, in your use case, you can programmatically load these environment variables in vue.config.js, rather than using the .env mechanism provided by Vue CLI by default.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

haoqunjiang commented 4 years ago

react configuration can directly add environment variables in package.json

Which tool do you use for the building? As far as I know, both create-react-app and umijs use dotenv underlyingly, just like Vue CLI.

change the build.js in the original scaffold

Vue CLI 3/4 does not scaffold projects with build.js. Did you mean the webpack template for Vue CLI 2? https://github.com/vuejs-templates/webpack/

LXJSQ commented 4 years ago

I use the create react app tool. When react needs to add more environment variables, there is also dev configuration file management. However, there are many build environments for which only one environment variable needs to be added. React's scaffolding retains the ability to extend environment variables in package.json itself. For vue-cli 2 or 3, we need to change build.js to meet this requirement. I think this strategy of create react app is more convenient for most business scenarios.Of course, maybe it's because I'm involved in fewer projects.

Thanks.

------------------ 原始邮件 ------------------ 发件人: "Haoqun Jiang"<notifications@github.com>; 发送时间: 2019年12月16日(星期一) 晚上9:33 收件人: "vuejs/vue-cli"<vue-cli@noreply.github.com>; 抄送: "zz"<1147292329@qq.com>;"Author"<author@noreply.github.com>; 主题: Re: [vuejs/vue-cli] Vue builds different environment (#4950)

react configuration can directly add environment variables in package.json

Which tool do you use for the building? As far as I know, both create-react-app and umijs use dotenv underlyingly, just like Vue CLI.

change the build.js in the original scaffold

Vue CLI 3/4 does not scaffold projects with build.js. Did you mean the webpack template for Vue CLI 2? https://github.com/vuejs-templates/webpack/

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

haoqunjiang commented 4 years ago

React's scaffolding retains the ability to extend environment variables in package.json itself

How? I don't understand. https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/env.js As far as I know they use the same mechanism as Vue CLI.

LXJSQ commented 4 years ago

like this.

But I found that vue-cli3 can be injected like this. ------------------ 原始邮件 ------------------ 发件人: "Haoqun Jiang"<notifications@github.com>; 发送时间: 2019年12月17日(星期二) 下午5:31 收件人: "vuejs/vue-cli"<vue-cli@noreply.github.com>; 抄送: "zz"<1147292329@qq.com>;"Author"<author@noreply.github.com>; 主题: Re: [vuejs/vue-cli] Vue builds different environment (#4950)

React's scaffolding retains the ability to extend environment variables in package.json itself

How? I don't understand. https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/env.js As far as I know they use the same mechanism as Vue CLI.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.