Vite+Vue3项目如何获取环境配置,并解决前端跨域问题
1.Vite+Vue3项目如何获取环境配置,并解决前端跨域问题
2.Vite+Vue根据环境配置Websocket地址步骤
-
根目录新建.env.development和.env.production文件
-
package.json配置启动参数
vite命令启动项目时,指定mode参数,加载vite.config.ts文件。
"dev": "vite --host 0.0.0.0 --port 8093 --mode development", "prod": "vite --port 8093 --host 0.0.0.0 --mode production", "build:dev": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false && vite build --mode development", "build:prod": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false && vite build --mode production",
- 配置代理
在vite.config.ts中配置代理
server: { cors: true, proxy: { '/api': { target: VITE_SERVER_URL, changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^\/api/, '') // 重写请求 } } }
- 配置vite-plugin-html
通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面title和logo。
createHtmlPlugin({ inject: { data: { logo: VITE_LOGO, title: VITE_TITLE, }, }, }),
代码
准备
安装组件
"axios": "^1.6.7", "vite-plugin-html": "^3.2.2", "vue": "^3.4.15",
编码
.env.developent
# 开发环境配置 NODE_ENV='development' # 本地服务端口 VITE_PORT=8093 # 后台服务地址 VITE_SERVER_URL='http://localhost:8083' # 页面标题 VITE_TITLE='XXX-dev' # ICO VITE_LOGO='/favicon-dev.ico' # 超时时间(ms) VITE_AXIOS_TIMEOUT=10000
.env.production
# 开发环境配置 NODE_ENV='production' # 本地服务端口 VITE_PORT=12003 # 后台服务地址 VITE_SERVER_URL='http://192.168.31.3:11003/' # 页面标题 VITE_TITLE='XXX' # ICO VITE_LOGO='/favicon.ico' # 超时时间(ms) VITE_AXIOS_TIMEOUT=10000
vite.config.ts
import { fileURLToPath, URL } from 'node:url' import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import {createHtmlPlugin} from 'vite-plugin-html'; // https://vitejs.dev/config/ export default (({mode}: {mode: string}) => { const VITE_ENV_CONFIG = loadEnv(mode, process.cwd()); const VITE_SERVER_URL = VITE_ENV_CONFIG.VITE_SERVER_URL; const VITE_TITLE = VITE_ENV_CONFIG.VITE_TITLE; const VITE_LOGO = VITE_ENV_CONFIG.VITE_LOGO; return defineConfig({ plugins: [vue(), vueJsx(), createHtmlPlugin({ inject: { data: { logo: VITE_LOGO, title: VITE_TITLE, }, }, }), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, // 配置代理,解决跨域问题 server: { cors: true, proxy: { '/api': { target: VITE_SERVER_URL, changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^\/api/, '') // 重写请求 } } } },) })
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="icon" href="<%= logo %>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= title %></title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体