免费空间申请free_下载应用软件排行榜_今日军事新闻视频_八宿县网站seo优化排名

新建.env.development及.env.production

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

格式如下

VITE_APP_BASE_API=http://localhost:8070

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

修改env.d.ts

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

具体看注释即可

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即走生产环境的后端地址