Laravel 9 (Vite)在https的本地网络上共享

Question

我正在开发一个使用(移动设备的)摄像头的网络应用程序，但这只适用于https和localhost。

web应用程序在本地使用WAMP 3.2.9提供服务。

我已经设法在我的wamp配置中使用了安全协议(https)，但是当我想将我的应用程序共享到我的本地网络时，我遇到了问题，这样我就可以在我的手机上查看应用程序并测试相机功能。

在老版本的Laravel (其中使用webpack)，这是非常容易使用浏览器同步，但现在，使用Vite我不知道具体如何做到这一点。

我的本地域是myapp.test，可以使用http和https访问。

我尝试使用npm run vite --host，它也显示本地和网络地址(例如。192.168)，但是当我在手机上访问这个地址时，我只能看到Vite默认页面This is the Vite development server that provides Hot Module Replacement for your Laravel application.，而不能看到应用程序本身。

在我的vite.config.js文件中，我添加了来自vite网络的ip：

server: {
    https: true,
    host: '192.168._._'
},
plugins: [
    laravel({
        input: [
            'resources/css/app.css',
            'resources/js/app.js',
        ],
        refresh: [
            ...refreshPaths,
            'app/Http/Livewire/**',
        ],
    }),
    mkcert()
],

请注意，我还使用了mkcert vite插件来允许我使用https。

现在，我对默认运行在端口5173上的vite服务和在https上应该运行在端口443上的应用程序感到困惑。

我也试过使用‘服务--主机192.168..它可以在我的本地网络上工作，但是它不适用于https，所以我不得不只关注WAMP。

那么，我如何在本地网络中使用https共享我的应用程序呢？

Answer 1

我将解释与Webpack相比，Vite是如何工作的，希望能帮助您更好地理解。

Webpack和Vite在使用构建命令编译产品时都会创建一捆文件。使用dev命令，这似乎是在使用，它们的工作方式有点不同。Webpack监视文件更改以重新编译包和BrowserSync，然后为您重新加载资产，而Vite则启动本地服务器以服务已编译的文件。这意味着您不会像使用BrowserSync那样代理原始域。Vite还在您的公用文件夹中创建了一个名为“热”的文件，它告诉Laravel在使用@vite()指令或Vite::asset()方法时应该使用哪个url。正因为如此，您甚至可以使用原始域myapp.test来重新加载dev命令。我不认为Laravel实际上支持--host，如果它不支持，我就无法找到它或解决它。

我确实找到了https://github.com/Applelo/vite-plugin-browser-sync来解决您在其他设备上的测试问题，但是我无法让它与https一起工作，否则我担心您可能不得不研究一些类似ngrok的东西，使用npm run build命令代替dev，直到在Laravel中构建了更好的支持为止。

更新:要配置BrowserSync插件，必须手动配置代理：

VitePluginBrowserSync({
    bs: {
        proxy: 'http://myapp.test/' // The usual access URL
    }
})

由于Laravel似乎不支持--host，所以我找到了一个解决办法:因为Laravel从公共目录中的hot文件读取资产主机URL，所以在运行npm run dev --host之后可以用外部Vite URL替换内容，比如http://192.168.1.37:5174。这将使Laravel在引用任何资产时使用该URL。