Configuration and application of vue3.env environment variables

1. What is .env file

The .env file is the configuration file for running the project, which is used to classify and store different configurations in different environments

2. How to use the .env file

1) generate

Create a new [.env] [.env.dev] [.env.pro] file in the project root directory

file format	describe
.env	The global configuration file will be loaded regardless of the environment
.env.dev	Configuration files for the development environment
.env.pro	Configuration files for the production environment

.env file content

# port 端口号
VITE_PORT  = 8888

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false

.env.dev file content

# 开发环境
VITE_ENV = 'development'

# 开发接口地址
VITE_API_URL = 'http://1.2.3.4:8098'

# 数据管理地址
VITE_API_DATA = 'http://1.2.3.4:8098/data-management'

2) Effective

Modify the content of scripts in package.json

  "scripts": {
    
    
    "dev": "vite --mode dev",
    "pro": "vite --mode pro",
    "build:dev": "vite build --mode dev",
    "build:pro": "vite build --mode pro",
    "preview": "vite preview"
  },

2) use

It can be used directly in the page, and the reading method is as follows

console.log( import.meta.env.VITE_API_URL)