前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vite 跨域配置

vite 跨域配置

作者头像
CODER-V
发布2023-03-24 10:40:37
1.4K0
发布2023-03-24 10:40:37
举报
文章被收录于专栏:藏经阁藏经阁

前言

跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题。

跨域可以在前端通过 代理服务器实现,也可以通过后端配置请求头实现,具体情况具体选择。 若线上环境跨域则只能通过后端配置请求头解决。

代码

vite,config.ts里配置

代码语言:javascript
复制
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins:[vue()], // 配置需要使用的插件列表,这里将vue添加进去
  // 强制预构建插件包
  optimizeDeps: {
    include: ['axios'],
  },

  // 打包配置
  build: {
    target: 'modules',
    outDir: 'dist', //指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    minify: 'terser' // 混淆器,terser构建后文件体积更小
  },

  // 本地运行配置,及反向代理配置
  server: {
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置,注意rewrite写法,开始没看文档在这里踩了坑
    proxy: {// 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
      '/api': {
        target: 'http://localhost/3000', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true,  // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
      }
    }
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档