前端多环境配置

在项目根目录下创建.env、.env.dev、.env.test文件

因为创建的项目是vue3,我记得当时说要以VITE_APP打头

我的.env和.env.dev文件内容是相同的,试了试删掉.env文件内容,会影响调用。(不是专业的前端,.env不是能将.dev、.test的环境整合到.env吗?怎么相同的内容删掉会找不到?)

复制代码
VITE_ENV = development
VITE_NAME='开发环境'
VITE_APP_API_URL=http://localhost:8081/hhc/test/interactiveQA

在package.json文件中修改scripts代码段为:

表示如果npm run dev 则默认走development ;如果允许npm run build 则打包test环境

复制代码
"scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production", 
    "start": "vite --mode production",
    "build:env": "vite build --mode development"
  },

在vite.config.js文件defineConfig添加配置

复制代码
export default defineConfig(({mode,command})=>{
  const env = loadEnv(mode,process.cwd());
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    assetsPublicPath: './'
  },
   // 添加这个配置
   define:{
    'process.env':env
   }
})

调用:process.env.VITE_APP_API_URL

相关推荐
liliangcsdn2 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero5 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui8 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴12 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte15 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常16 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常18 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾19 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101822 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28129 分钟前
Chrome插件开发
前端