Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题已关闭评论
  • 92 次浏览
  • A+
所属分类:Web前端
摘要

根目录新建.env.development和.env.production文件package.json配置启动参数vite命令启动项目时,指定mode参数,加载vite.config.ts文件。


步骤

  • 根目录新建.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='工具箱-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='工具箱'  # 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>