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

Vue 2.X webpack 环境下 Vue Cli 的命令

javascript 复制代码
  "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 命令行

javascript 复制代码
  "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

javascript 复制代码
VITE_APP_API_URL = http://localhost:3000/api

Vue Cli 环境变量文件

env.development 或 .env.production

javascript 复制代码
# 开发环境配置
ENV = 'development'
VUE_APP_BASE_API = 'http://xxxxx/api'
javascript 复制代码
# 开发环境配置
ENV = 'production'
VUE_APP_BASE_API = 'http://xxxxx/api'

Vue Cli 访问环境变量方式

javascript 复制代码
process.env.VUE_APP_BASE_API

Vite 访问环境变量方式

javascript 复制代码
<script lang="ts" setup>
const apiUrl = import.meta.env.VITE_APP_API_URL;
console.log(apiUrl);
</script>
相关推荐
小毛驴85011 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L4 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊4 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选4 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ8 小时前
Vue2上
vue.js·npm
江城开朗的豌豆8 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景11 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js
征尘bjajmd11 小时前
vue+element-ui实现主子表
javascript·vue.js·elementui
帧栈11 小时前
开发避坑短篇(6):Vue+Element UI 深度选择器实现表单元素精准对齐的技术实践
vue.js·ui·elementui
小毛驴85011 小时前
典型的 Vue 3 项目目录结构详解
前端·javascript·vue.js