vue3 vite 跨域问题搞死人

vite.config.js

  server: {
    host: '0.0.0.0',
    // port: 80,
    proxy: {
      '/api': {
        target: 'https://xxx.com', //目标url
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, ''),
        //重写路径,替换/api
        // ws:true,
      },
    },
  },

最近被vue3的跨越问题搞死人，部署到服务器，服务器配置文件：

## 后台接口
  location /api {
    proxy_pass https://xxx.com;
  }

关键是这个东东不能复现，有时候运行正常，有时候又不行，真是搞死人了。绝大部分时候运行不了。不知道是什么原因。

后来想，实在没办法，把vue上传用npm run dev吧，可是echats图加载，element-plus加载又是搞死人，一个echats有19兆，element-plus有17兆，页面要加载40秒！！
echats按需加载：

import * as echarts from '../../../node_modules/echarts/lib/echarts';

import '../../../node_modules/echarts/lib/component/title';
import '../../../node_modules/echarts/lib/component/legend';
import '../../../node_modules/echarts/lib/component/radar';
import '../../../node_modules/echarts/lib/chart/radar';

elment-plus:

// vite.comfig.js
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// plugins: []
    // 自动加载ui模块
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

echarts是解决了，但在npm run dev模式下elment-plus永远是要加载17m大小的文件。后来想一想，build里的dist是需要Nginx服务器来进行代理进行跨域，npm run dev是node进行解决跨越，那npm run preview不是也可以使用node来解决跨域吗？

赶紧上传，npm run preview，kao，解决了！！！

// package.json
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 80"
  },

npm run preview 叫预览，明明是 production嘛，node模式下的生产模式啊。

这样再也不用烦恼跨越问题了……

在 @star7th 的提醒下，又再次看看Nginx和vite代理的差异，发现vite的proxy是替换，而Nginx则没有。

  location /api {
    rewrite ^/api/(.*) /$1 break;
    proxy_pass https://xxx.com;
  }

所以要把api这个自定义的路由前缀给屏蔽掉。之前部署的时候，在代码里把api给替换了，这次忘记了。本地测试的时候地址是 xxx/api/api/xxx，正常读取数据，部署的时候还以为也需要这样，部署的时候要把去掉一个api。

本作品采用《CC 协议》，转载必须注明作者和本文链接