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

四岁爱上了她2024-05-08 22:13

开发环境文件 .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"
  }
}