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>