老是忘记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>
相关推荐
麦麦大数据13 分钟前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区1 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长1 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据3 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子199110164 小时前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin
疯狂的沙粒5 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
海鸥两三8 小时前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手8 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
布兰妮甜8 小时前
彻底清理:Vue项目中移除static文件夹的完整指南
vue.js·前端框架·static·1024程序员节