当前位置:首页 > 编程笔记 > 正文
已解决

vite.config.js文件配置代理设置VITE_APP_BASE_API

来自网友在路上 148848提问 提问时间:2023-10-26 03:36:10阅读次数: 48

最佳答案 问答题库488位专家为你答疑解惑

.env.development文件

ENV = 'development'
# base api
VITE_APP_BASE_API = '/dev-api'

.env.production文件

ENV = 'production'
# base api
VITE_APP_BASE_API = '/api'
 define: {'process.env': {VITE_APP_BASE_API: 'https://xxx.com'}},server: {hmr: true, // vue3 vite配置热更新不用手动刷新host: '0.0.0.0',port: 3000, // 端口open: false, // 启动项目后打开浏览器hot: true,overlay: {warning: false,error: true},proxy: {[env.VITE_APP_BASE_API]: {target: 'https://xxx.com',ws: true,changeOrigin: true,secure: false,rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')}}}
}

完整: 

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import Components from 'unplugin-vue-components/vite' // 组件注册
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import vueI18n from '@intlify/vite-plugin-vue-i18n'// 自动导入element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {// 获取.env文件里定义的环境变量const env = loadEnv(mode, process.cwd())// .env文件中的环境变量必须以VITE_为前缀,否则无法引用成功return {base: './',build: {publicDir: 'public',assetsDir: 'static',outDir: 'dist'},plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports: ['vue'],resolvers: [// 自动导入element plus相关函数(带样式)ElementPlusResolver(),// 自动导入图标组件IconsResolver({prefix: 'Icon',enabledCollections: ['ep']})]}),Components({// 要搜索组件的目录的相对路径。默认 ['src/components']dirs: ['src'],// 组件的有效文件扩展名。extensions: ['vue'],// 搜索子目录deep: true,resolvers: [// 自动导入element plus组件ElementPlusResolver(),NaiveUiResolver(),// 自动注册图标组件IconsResolver({prefix: 'i',enabledCollections: ['ep']})]}),Icons({compiler: 'vue3',autoInstall: true}),createSvgIconsPlugin({// 这个是自己配置的图标路径,指出来(自己咋配置的咋来)iconDirs: [resolve(process.cwd(), 'src/icons/svg')],// 这个表示id,按这个来就对了symbolId: 'icon-[dir]-[name]'}),vueI18n({include: resolve(__dirname, './path/to/src/locales/**')})],resolve: {// 配置路径别名alias: {'@': resolve(__dirname, './src'),'api': resolve(__dirname, './src/api'),'views': resolve(__dirname, './src/views'),'utils': resolve(__dirname, './src/utils'),'comp': resolve(__dirname, './src/components'),'assets': resolve(__dirname, './src/assets'),'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'},extensions: ['.js', '.ts', '.vue', '.json', '.less', '.css']},define: {'process.env': { // 环境变量通常可以从 process.env 获得。注意Vite默认是不加载env文件的VITE_APP_BASE_API: 'https://xxx.com'}},server: {hmr: true, // vue3 vite配置热更新不用手动刷新host: '0.0.0.0',port: 3000, // 端口open: false, // 启动项目后打开浏览器hot: true,overlay: {warning: false,error: true},proxy: {[env.VITE_APP_BASE_API]: {target: 'https://xxx.com',ws: true,changeOrigin: true,secure: false,rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')}}}}
})
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"vite.config.js文件配置代理设置VITE_APP_BASE_API":http://eshow365.cn/6-24730-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!