vue脚手架和vite创建的项目的环境配置

开发环境文件 .env.development

js 复制代码
NODE_ENV="development"
# // 开发接口域名   本地测试就用这个
# vue脚手架创建的
VUE_APP_MODE="开发环境"
VUE_APP_API_URL= 'http://19527'
# vite创建的
# VITE_MODE="开发环境"
# VITE_BASE_URL= 'http://1920:9527'

生产环境文件 .env.production

js 复制代码
NODE_ENV="production"
# // 生产环境域名,放线上就用这个
# vue脚手架创建的
VUE_APP_MODE="生产环境"
VUE_APP_API_URL= 'https://jk:17776'
# vite创建的
# VITE_MODE="生产环境"
# VITE_BASE_URL= 'https:/rk:17776'

测试是否生效

js 复制代码
//vue脚手架创建的项目
  console.log('vue脚手架创建的项目开发的环境是什么',process.env)
  console.log('vue脚手架创建的项目开发的环境是',process.env.VUE_APP_API_URL)
//vite创建的项目
  console.log('vite创建的项目开发的环境是什么',import.meta.env)
  console.log('vite创建的项目开发的环境是',import.meta.env.VITE_MODE)

注意:vue.config.js或者vite.config.js里面的配置需要自行百度一下了,因为我这边后端设置了运行跨域

项目打包

在 package.js文件里修改打包命令

开发环境打包命令: npm run build:deve

生产环境打包命令: npm run build:prod

js 复制代码
{
  "name": "use",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build:deve": "vite build --mode development", //开发环境打包
    "build:prod": "vite build --mode production",   //生产环境打包
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "animate.css": "^4.1.1",
    "axios": "^1.4.0",
    "echarts": "^5.5.0",
    "element-plus": "^2.3.6",
    "qs": "^6.11.2",
    "sortablejs": "^1.15.2",
    "vue": "^3.2.47",
    "vue-router": "^4.2.2",
    "vuex": "^4.1.0",
    "vxe-table": "^4.5.22",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.3.9"
  }
}
相关推荐
你挚爱的强哥12 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript