老是忘记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>
相关推荐
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding7 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景8 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘8 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)9 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中9 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi10 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X10 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123411 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js