老是忘记package.json，备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比

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>