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

开发环境文件 .env.development

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

生产环境文件 .env.production

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

测试是否生效

//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

{"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"}
}