老是忘记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>
相关推荐
爱泡脚的鸡腿29 分钟前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
小狮子安度因1 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse
古夕1 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js
古夕1 小时前
技术复盘文档:`resourceLogoUrl` 数据丢失问题分析与最终解决方案
前端·javascript·vue.js
青衫旧故1 小时前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app
LoveEate2 小时前
vue3 el-switch表单联动校验
前端·javascript·vue.js
2301_797604242 小时前
d40: vue杂项问题
前端·javascript·vue.js
Olrookie3 小时前
若依前后端分离版学习笔记(十八)——页面权限,页签缓存以及图标,字典,参数的使用
vue.js·笔记·学习
琹箐3 小时前
Aupload + vuedraggable实现 上传的文件可以拖拽排序
前端·vue.js
前端 贾公子3 小时前
Vue.js props mutating:反模式如何被视为一种良好实践。
前端·javascript·vue.js