vue3.env 環境変数の設定と適用

1..envファイルとは何ですか

.env ファイルは、プロジェクトを実行するための構成ファイルであり、さまざまな環境でさまざまな構成を分類して保存するために使用されます。

2. .env ファイルの使用方法

1) 生成する

プロジェクトのルート ディレクトリに新しい [.env] [.env.dev] [.env.pro] ファイルを作成します

ファイル形式	説明
.env	グローバル設定ファイルは環境に関係なくロードされます。
.env.dev	開発環境用の設定ファイル
.env.pro	実稼働環境の構成ファイル

.env ファイルの内容

# port 端口号
VITE_PORT  = 8888

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

.env.dev ファイルの内容

# 开发环境
VITE_ENV = 'development'

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

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

2) 効果的

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) 使用する

ページ内で直接使用できます。読み取り方法は次のとおりです。

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