Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to distinguish different environments in vue". In daily operation, I believe many people have doubts about how to distinguish different environmental problems in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to distinguish different environments in vue"! Next, please follow the editor to study!

How to distinguish between different environments

In vue development, we often distinguish different variables according to different environments. The common environments are as follows:

Production environment: production

Development environment: development

Test environment: test.

Method 1. Manually modify different variables const BASE_URL = 'http://dlfordmc.org/dev'const BASE_NAME =' coder'// const BASE_URL = 'http://dlfordmc.org/prod'// const BASE_NAME =' kobe'// const BASE_URL = 'http://dlfordmc.org/test'// const BASE_NAME =' james'export {BASE_URL, BASE_NAME}

We should uncomment the variable in whatever environment we are in. This is too cumbersome and unsafe. If we forget that when we are in a production environment, we are using variables in the development environment, which will cause insecurity.

Mode 2. Use process.env.NODE_ENV to distinguish let BASE_URL =''let BASE_NAME =''if (process.env.NODE_ENV = 'production') {BASE_URL =' http://dlfordmc.org/prod' BASE_NAME = 'dmc'} else if (process.env.NODE_ENV =' development') {BASE_URL = 'http://dlfordmc.org/deve' BASE_NAME =' dl'} else {BASE_URL = 'http:/ / dlfordmc.org/test' BASE_NAME = 'dlfordmc'} export {BASE_NAME BASE_URL} method 3. Write different configuration files of environment variables

You need to write three files in the root directory:

.env.development

VUE_APP_BASE_URL= https://fordmcdl.org/devepmentVUE_APP_BASE_NAME=devepmemt

.env.production

VUE_APP_BASE_URL= https://fordmcdl.org/productionVUE_APP_BASE_NAME=production

.env.test

VUE_APP_BASE_URL= https://fordmcdl.org/testVUE_APP_BASE_NAME=test

When visiting other places at this time

Console.log (process.env.VUE_APP_BASE_URL) / / https://fordmcdl.org/devepment console.log (process.env.VUE_APP_BASE_NAME) / / devepmemt

Note: VUE_APP must be added at this time, and process.env must be added when visiting.

Vue configures different environments

Official website study: https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

If the project has four environments: development, production, testing, and other

The following files need to be configured

1.package.json

By default, vue scaffolding has two environments, development and production, developed in the local environment, and released to the production environment, with the following configuration

"scripts": {"dev": "webpack-dev-server-- inline-- progress-- config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint-- ext .js, .vue src", "build": "node build/build.js"}

If it becomes 4 environments, 1 local development, 3 releasable tests.

First of all, we need to figure out what we need.

① needs to be developed locally and packaged to different environments for testing and distribution.

② is still developed in a different environment, and packaging is also a different environment.

If it is the first kind

"scripts": {"dev": "webpack-dev-server-- inline-- progress-- config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint-- ext .js, .vue src", "build": "node build/build.js", / / use this "build--dev": "cross-env NODE_ENV=production env_config=dev node build/build.js" "build--test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" / / or use this vue3.0 "build": "vue-cli-service build-- mode development", "prodbuild": "vue-cli-service build-- mode production", "testbuild": "vue-cli-service build-- mode test"}

If it's the second kind,

"scripts": {"serve": "vue-cli-service serve-- mode development", "test": "vue-cli-service serve-- mode test", "production": "vue-cli-service serve-- mode production", "build": "vue-cli-service build-- mode development", "prodbuild": "vue-cli-service build-- mode production", "testbuild": "vue-cli-service build-- mode test"} The study on "how to distinguish different environments in vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.