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

本文介绍了如何在Vite项目中设置不同的环境变量,包括.env.development和.env.production文件,以及如何配置vite.config.ts以实现代理功能,解决API跨域问题,并通过vite-plugin-html动态绑定页面标题和logo。
摘要由CSDN通过智能技术生成

这里写自定义目录标题

步骤

  • 根目录新建.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>
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值