Explain to me, please, how I can use, for example, process.env.NODE_ENV directly in the Vue.js code of the application.

I will clarify what I mean not Webpack configs, but directly the main.js file from:

 module.exports = { entry: { app: './src/main.js' },

Read https://webpack.js.org/plugins/define-plugin/ , but did not understand. Very scarce examples that do not go away further Webpack configs (although they have an example SERVICE_URL , which looks very strange). On one forum I saw the phrase, they say, using DefinePlugin, you can use environment variables directly in the code of the application files, but again, no examples, but I did not succeed. The variable process or NODE_ENV in the application code is not available - displays a critical error: 'process' is not defined .

Using process.env I want to transfer, for example, to the main.js file the data for Vue.config . Or the same SERVICE_URL .

Tell me, please, what am I doing wrong?

    1 answer 1

    DefinePlugin here can help, in the webpack configuration:

      plugins: [ new webpack.DefinePlugin({ 'process.env': { 'SERVICE_URL': JSON.stringify('http://some_url'), } }) ]

    And further we use in the code: process.env.SERVICE_URL

    • So I wrote that and I do. But in the code the error, they say, is 'process' is not defined . - Colibri
    • I understand that the code you gave seems to be passed to process.env in application code. Yes, and people write about it on the Internet. But why then do I catch a critical error? Application Vue.js collected from their templates. That is, Webpack configs were not collected from scratch, and did not rewrite them much, especially in a similar area, as interaction with env. - Colibri
    • I think here, without a real code, you will say something. Perhaps this plugin is not used in your config, for example, for dev builds or vice versa. But here you will not guess) - Eugene Kulakov