Vue.js+Vite.js在企业代理环境下的外部CSS代理问题求助

方案1：让Vite代理通过企业代理发起请求 #

公司环境下，Vite的代理请求需经过企业代理服务器才能访问外部域名，可通过配置代理agent实现：

1. 安装代理依赖：

npm install https-proxy-agent --save-dev

2. 修改vite.config.js配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import HttpsProxyAgent from 'https-proxy-agent'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/custom/mycss.css": {
        target: "https://www.lorem.com",
        changeOrigin: true,
        // 配置公司企业代理地址
        agent: new HttpsProxyAgent('http://myproxy.xyz:123'),
        // 简化路径映射（原rewrite规则无实际修改，可按需调整）
        rewrite: (path) => path.replace(/^\/custom/, '')
      },
    },
  },
})

如果企业代理需要账号密码认证，将代理地址改为：http://用户名:密码@myproxy.xyz:123

方案2：本地引入CSS文件（直接规避代理问题） #

把外部CSS文件下载到项目本地，彻底绕开代理相关限制：

1. 访问https://www.lorem.com/custom/mycss.css，将文件保存到项目的public/css/目录下
2. 修改index.html中的引入路径：

<link rel="stylesheet" href="/css/mycss.css">

方案3：通过系统环境变量配置全局代理 #

确保Node进程继承企业代理设置，启动Vite前先执行以下命令：

• Windows命令行：

set HTTP_PROXY=http://myproxy.xyz:123
set HTTPS_PROXY=http://myproxy.xyz:123

• Linux/macOS终端：

export HTTP_PROXY=http://myproxy.xyz:123
export HTTPS_PROXY=http://myproxy.xyz:123

设置完成后再启动Vite项目（npm run dev）

方案4：检查公司网络权限 #

确认目标域名https://www.lorem.com是否在公司防火墙/代理的白名单中，若未被放行，需联系IT部门申请添加白名单

内容的提问来源于stack exchange，提问作者frenchman100