VUE3配置后端地址,实现前后端分离及开发、正式环境分离

新建.env.development.env.production

  • .env.development 指定开发环境地址
  • .env.production 指定生产环境地址

格式如下

bash 复制代码
VITE_APP_BASE_API=http://localhost:8070

只需要在对应文件写入对应的后端地址即可

修改env.d.ts

typescript 复制代码
/// <reference types="vite/client" />
interface ImportMetaEnv {
    readonly VITE_API_BASE_URL: string;
    readonly VITE_BACKEND_BASE_URL: string; // 定义后端地址
    readonly VUE_APP_BASE_API: string // 定义后端API接口地址
    // 其他环境变量
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

修改vite.config.ts

具体看注释即可

typescript 复制代码
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
// 导出一个默认的配置对象,用于配置当前项目
export default defineConfig({
  // 插件配置,加载 vue 和 vueDevTools 插件
  plugins: [
    vue(),
    vueDevTools(),
  ],
  // 解析配置,用于配置模块导入路径的别名
  resolve: {
    alias: {
      // 将 '@' 符号映射到项目的 src 目录,简化导入路径
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  // 基本配置,定义项目的基路径
  base: '/',
  // 服务器配置,用于开发服务器的设置
  server: {
    // 代理配置,解决开发环境下的跨域问题
    proxy: {
      // 将以 '/api' 开头的请求代理到后端服务器
      '/api': {
        // 后端服务器地址,使用环境变量
        target: import.meta.env.VITE_APP_BASE_API,
        // 允许改变请求的来源
        changeOrigin: true,
        // 重写请求路径,去掉 /api 前缀
        rewrite: (path) => {
          const newPath = path.replace(/^\/api/, '');
          console.log(`Original path: ${path}, Rewritten path: ${newPath}`);
          return newPath;
        },
      },
    },
  },
});

使用

通过package.json运行的时候,选择dev即可让程序自动走.env.development定义的后端地址,选择build即走生产环境的后端地址

相关推荐
秋天的一阵风3 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风4 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺24 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺25 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码25 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou26 分钟前
组件测试
前端
JustHappy29 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可43 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端