Laravel mix 6 hot 和 https答案

【问题标题】：Laravel mix 6 hot with httpsLaravel mix 6 hot 和 https
【发布时间】：2021-06-29 21:57:48
【问题描述】：

配置：

Laravel Mix 6.0.16

Laravel 代客 2.13.19

webpack 5.30.0

webpack-cli 4.6.0

webpack-dev-server 4.0.0-beta.1

说明：

我尝试在 MacOs with Valet 的 Laravel 8 中启用 https 以进行热替换。我的网站是安全的，在我的 package.json 中添加 --https

"hot": "mix watch --hot --https"

然后我在 CLI 中启动命令

yarn hot

它是成功的，但是当我打开我的网站时，我在浏览器控制台看到错误http://joxi.ru/nAypq4ZTwJBP52

net::ERR_CERT_AUTHORITY_INVALID

【问题讨论】：

标签： laravel laravel-8 laravel-mix webpack-5

【解决方案1】：

就我而言，我遇到了混合内容问题。我发现 publicPath 仍在使用 http 而不是 https。我通过覆盖它来修复公共路径。还添加了一些检查以读取证书（如果存在）并使证书路径通用。

const homeDir = process.env.HOME;
const host = process.env.APP_URL.split('//')[1];
const port = '8080';

mix.options({
    hmrOptions: {
        host,
        port
    }
});

if (
    process.argv.includes("--hot") &&
    fs.existsSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.key`)) &&
    fs.existsSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.crt`))
) {
    mix.webpackConfig({
        devServer: {
            https: {
                key: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.key`)).toString(),
                cert: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.crt`)).toString()
            },
        }
    });
    // overriding publicPath as it was using http and causing mixed-content
    mix.override(c => {
        c.output.publicPath = process.env.APP_URL + `:${port}/`
    });
}

更新

laravel-mix-valet 在 npm 上可用，它与 laravel valet 一起使用

require('laravel-mix-valet');
const host = process.env.APP_URL.split('//')[1];


mix.js('resources/js/app.js', 'public/js')
    .valet(host)
    .vue();

【讨论】：

【解决方案2】：

我找到了解决办法。

从 package.json 中的脚本定义中移除 --https
在文件webpack.mix.js
中添加配置

    mix.options({
     hmrOptions: {
      host: url,
      port: 8080
     }
    })

    mix.webpackConfig({
      devServer: {
        https: {
          key: fs.readFileSync('/Users/alex/.config/valet/Certificates/castle.test.key'),
          cert: fs.readFileSync('/Users/alex/.config/valet/Certificates/castle.test.crt')
        }
      }
    })

【讨论】：

谢谢。使用本地开发服务器工作正常。但是，我仍然面临混合内容的问题，但通过使用这种方法很快就解决了：stackoverflow.com/a/57646910/3088867
是的）感谢您的评论，我会将其添加为解决方案的一部分！）