远程访问Laravel+Vite项目失败（仅Chrome存在问题）

核心原因 #

执行npm run dev -- --host时，Vite默认绑定IPv6通配地址[::]:5173，Chrome的跨域安全策略会拦截公网页面加载[::]地址的资源——这个地址在本地可解析为回环地址，但公网环境下Chrome无法正确识别，导致CSS/JS/Vue组件加载失败；而Firefox对这类特殊地址的兼容性更好，所以能正常访问。

解决方案 #

1. 指定公网IP启动Vite Dev服务 #

启动Vite时直接指定你的公网IP，让资源路径生成正确的公网地址：

npm run dev -- --host 92.59.195.93 --port 5173

重启服务后，页面源码里的资源路径会变成http://92.59.195.93:5173/...，Chrome就能正常加载资源了。

2. 配置环境变量永久解决 #

在项目根目录的.env文件中添加Vite的公网地址：

VITE_APP_URL=http://92.59.195.93:5173

然后修改vite.config.js，读取环境变量配置Vite服务：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: process.env.VITE_APP_URL.split('://')[1].split(':')[0],
        port: parseInt(process.env.VITE_APP_URL.split(':')[2]),
    },
});

之后只需执行npm run dev即可，无需每次手动指定IP和端口。

3. 修复npm run build删除文件问题 #

Laravel Vite插件默认会清空public目录，导致.htaccess、index.php等文件被删除。修改vite.config.js添加build配置：

export default defineConfig({
    // ...其他配置
    build: {
        emptyOutDir: false, // 禁止清空输出目录
    },
});

这样执行npm run build时就不会删除public目录下的现有文件。

临时测试方案（不推荐生产用） #

如果只是临时测试，可关闭Chrome的跨域安全检查启动浏览器：

# Windows
chrome.exe --disable-web-security --user-data-dir="C:\temp\chrome_dev"

# Mac
open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/chrome_dev"

# Linux
google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"

注意：此方式会降低浏览器安全性，仅用于本地测试。

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