Vue 2.X webpack 環境下??Vue Cli 的命令

  "scripts": {"dev": "vue-cli-service serve","prod": "vue-cli-service serve --mode production","build:dev": "vue-cli-service build --mode development","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","lint": "eslint --ext .js,.vue src"},

Vue 3.X 下 Vite 命令行

  "scripts": {"dev": "vite", // 啟動開發服務器"prod": "vite --mode production", // 以生產模式啟動開發服務器"build:dev": "vite build --mode development", // 以開發模式構建項目"build:prod": "vite build", // 以生產模式構建項目"build:stage": "vite build --mode staging", // 以預發布模式構建項目"preview": "vite preview", // 預覽構建后的項目"lint": "eslint --ext .js,.vue src" // 代碼檢查},

Vite 環境變量文件

.env.development 或?.env.production

VITE_APP_API_URL = http://localhost:3000/api

Vue Cli 環境變量文件

env.development 或?.env.production

# 開發環境配置
ENV = 'development'
VUE_APP_BASE_API = 'http://xxxxx/api'

# 開發環境配置
ENV = 'production'
VUE_APP_BASE_API = 'http://xxxxx/api'

Vue Cli 訪問環境變量方式

process.env.VUE_APP_BASE_API

Vite?訪問環境變量方式

<script lang="ts" setup>
const apiUrl = import.meta.env.VITE_APP_API_URL;
console.log(apiUrl);
</script>