浏览器查看打印结果:打印的是.env.development文件中的内容,import.meta.env这个环境变量是当前环境变量的内容。 生产环境 npm run build 打包后再dist目录选中index.html 右键运行 open with Live Server,同时注意在vite.config.js中配置根路径 base:'/',不然浏览器中会报错 浏览器中显示的结果为: 但是存在一个问...
针对不同的环境可以去配置,例如页面的统一标题,参数常量… 下面根据环境配置不同的请求域名👇 import { defineConfig, loadEnv }from'vite'exportdefaultdefineConfig(({ mode }) =>{//获取当前环境的配置constconfig = loadEnv(mode,'./')return{ server: { proxy: {'/basice': { target: config.VITE_...
import{defineConfig}from"vite";exportdefaultdefineConfig({server:{open:false,//项目启东时是否打开页面host:"127.0.0.1",port:3456,proxy:{"^/api/":{target:"https://www.bilibili.com/",// 后台服务器地址changeOrigin:true/* 允许跨域 */,rewrite:(path)=>path.replace(/^\/api/,""),},},},}...
使用环境变量:通过环境变量来配置代理目标地址,以便灵活切换不同的后端服务。 // vite.config.jsimport{defineConfig}from'vite';exportdefaultdefineConfig({server:{proxy:{'/api':{target:process.env.VITE_API_BASE_URL,changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}}); 在.env文件中...
开发环境:在开发环境中,Vite 通常使用vite.config.ts或vite.config.js文件中的server.proxy选项来配置代理,以便前端可以访问后端接口而不会遇到跨域问题。 生产环境:打包后,Vite 的代理配置不再起作用。此时,你需要确保 Nginx 或其他服务器正确配置了反向代理,以便将请求转发到后端服务器。
import{defineConfig}from'vite'// https://vitejs.dev/config/exportdefaultdefineConfig({// 解决本地接口请求跨域的问题,配置serverserver:{https:false,// 是否自动在浏览器打开open:true,cors:true,proxy:{'/path':{target:'https://v0.yiketianqi.com',// 接口域名,接口服务器地止changeOrigin:true,secu...
到这里开发环境就可以跑起来,因为Vite帮我们配置了默认的dev server,直接执行npm run dev,发现报错,缺少esbuild依赖,安装依赖npm install esbuild-windows-64 -D 安装成功后,重新执行npm run dev,启动成功,因为这里使用默认的配置,为了方便拓展,我们这里要重新配置dev server ...
一、配置vue.config.js文件有时候我们需要获取测试环境的数据，有时候则需要生产环境的数据，那么一次性配置好代理方式，就不用反复重启我们的本地服务了。/vue.config.js module.exports={devServer:{proxy:{'^/dev2test':{target:'https://api.test.cn',//测试changeOrigin:true,pathRewrite:{'^/...
server: { proxy: { '/api': { target: process.env.VITE_API_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }); 如何在Vite中添加新的环境 在Vite中添加新的环境非常简单。只需按照以下步骤操作即可: ...
Vite在2023-01-17可以用于生产环境，没什么问题；之所以这么说，是因为我已经用Vite上了一次生产。