Vue development environment and production environment set different variables

In Vue development, it is very common for us to set different variables in different environments. For example, in the development environment, we may need to turn on some debugging tools, and in the production environment, we need to turn off these debugging tools to improve application performance. At this time, we need to set different variables in the development environment and production environment.

Below, we will introduce how to set different variables in Vue.

1. Setting up in Vue-Cli

Vue-Cli is a scaffolding tool for Vue.js that has built-in everything needed to develop and build applications. So, if you develop your application using Vue-Cli, you can set variables in its configuration file.

First, you need to create a file named .env. in the root directory of the project, and then add the name of the environment variable at the end according to your needs. For example, we added an environment variable named VUE_APP_TEST in this file as follows:

VUE_APP_TEST=hello world

Then, in the component where you need to use this environment variable, you can pass process.env.VUE_APP_TEST to get the value of this environment variable.

It should be noted that in Vue-Cli, all variables starting with VUE_APP_ will be automatically injected into the application, and only when the NODE_ENV variable is set It will only work properly if it is development or production.

2. Set in Webpack

If you do not use Vue-Cli, but use the Webpack packaging tool, you can set it in webpack.config.js Set environment variables in the file.

First, you need to introduce webpack.DefinePlugin, and then set the environment variable in the plugin, as follows:

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      TEST: JSON.stringify('hello world')
    })
  ]
}

Then, after you need to use the environment variable In the component, you can get the value of this environment variable through process.env.TEST.

It should be noted that in Webpack, you need to set environment variables manually, and you need to set them in each environment, so it is relatively troublesome.

3. Setting in Node.js

If you are developing a Vue application in Node.js, you can set environment variables in the server-side code.

When the server starts, you can set the environment variable through the process.env object, as shown below:

process.env.TEST = 'hello world';

Then, when you need to use the environment variable In the component, you can also get the value of the environment variable through process.env.TEST.

It should be noted that if you are using Nuxt.js, you can set environment variables directly in the .env. file, which is as convenient as Vue-Cli.

Summary

Different development environments and production environments require different variable settings. Using Vue-Cli can easily set variables in the configuration file. Using Webpack, you can set them in webpack.config Variables are set in the .js file, but in Node.js they need to be set manually in the server code.

It should be noted that no matter which method is used, it needs to be set according to your specific needs.

The above is the detailed content of Vue development environment and production environment set different variables. For more information, please follow other related articles on the PHP Chinese website!