關于VUE3 vite.config.js文件配置相關
提示:本文記錄了我們項目中使用到了多個不同的接口請求前綴地址配置代理,如果有更好的優化方案歡迎大佬指點呀:
以下是我最近項目中的vite.config.js文件配置,由于剛開始vue3不久,希望各位大佬不吝賜教,快來分享你們的配置呀。
vite.config.js配置如下
/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';export default defineConfig(({ mode }) => {// 加載 .env 文件const env = loadEnv(mode, process.cwd());return {// host: "192.168.X.XXX", 這里改為自己的IP地址可以讓同事直接訪問自己本地,方便及時看到效果base: env.VITE_PUBLIC_PATH,resolve: {alias: {'@/': `${path.resolve(__dirname, 'src')}/`,},},server: {port: Number(env.VITE_PORT),proxy: {[env.VITE_BASE_API]: {// rewrite: (path) => path.replace(/^\/api/, ""),target: env.VITE_PROXY_API,changeOrigin: true,},[env.VITE_BASE_API1]: {target: env.VITE_PROXY_API,changeOrigin: true,},[env.VITE_BASE_API2]: {target: env.VITE_PROXY_API,changeOrigin: true,},[env.VITE_BASE_API3]: {target: env.VITE_PROXY_API,changeOrigin: true,},// [env.VITE_BASE_UPLOADS]: {// target: env.VITE_PROXY_UPLOADS,// changeOrigin: true,// },},},build: {chunkSizeWarningLimit: 1500,},plugins: [vue(),legacy({targets: ['defaults', 'not IE 11'],}),],css: {preprocessorOptions: {scss: {// 關閉編譯時 字符編碼 報錯問題charset: false,},},},};
});
vite.config文件中引入的.env文件配置如下
由于此項目我們使用到了多個baseapi 前綴,故此處配置多個
VITE_APP_TITLE=我的項目名
VITE_PROXY_API=https://xxxxx.com
VITE_PORT=9521
VITE_PUBLIC_PATH=./
VITE_BASE_API=/ctx-coop-member
VITE_BASE_API1=/ctx-coop-user
VITE_BASE_API2=/ctx-coop-portal
VITE_BASE_API3=/ctx-coop-finance