使用Vite.js + Cloudflare时出现协议错误的技术问询

步骤1：本地Hosts映射 #

编辑本地hosts文件，将你的域名指向本地服务器IP（如127.0.0.1或局域网IP）：

127.0.0.1 your-domain.com

这会让Vite启动时将域名解析到本地，而非Cloudflare的CDN IP，直接解决启动阶段的解析失败问题。

步骤2：配置Vite Server参数 #

修改vite.config.js，指定host为你的域名，同时设置origin确保资产路径使用域名，并配置SSL证书：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        port: 5173,
        host: 'your-domain.com',
        origin: 'https://your-domain.com:5173', // 强制资产路径使用域名
        https: {
            key: '/path/to/your-domain.com.key',
            cert: '/path/to/your-domain.com.crt',
        },
    },
});

步骤3：生成本地SSL证书 #

如果没有本地SSL证书，用mkcert工具快速生成：

• 安装mkcert：根据系统选择方式，比如Mac用brew install mkcert，Windows下载对应安装包
• 初始化本地CA：mkcert -install
• 生成域名证书：mkcert your-domain.com
• 将生成的.key和.crt文件放到项目目录（如storage/ssl/），并在Vite配置中指定路径

步骤4：Cloudflare临时调整 #

开发阶段将Cloudflare对应域名的代理状态设为DNS only，这样访问域名时不会经过Cloudflare CDN，直接指向本地IP；若需保持代理，可设置页面规则让your-domain.com:5173路径跳过代理。

验证配置 #

执行npm run dev启动Vite，此时资产路径会显示为https://your-domain.com:5173/...，浏览器访问不会出现协议错误，本地开发资源可正常加载。

内容的提问来源于stack exchange，提问作者Burak.H