Laravel mix 6 hot with https

Question

配置：

Laravel Mix 6.0.16

Laravel代客2.13.19

webpack 5.30.0

webpack-cli 4.6.0

webpack-开发-服务器4.0.0-beta.1

描述：

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

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

然后在CLI中启动命令

yarn hot

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

net::ERR_CERT_AUTHORITY_INVALID

Answer 1

我找到了解决方案。

从package.json的脚本定义中删除

1. --https

在文件webpack.mix.js中添加

1. 配置

    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')
        }
      }
    })

Answer 2

在我的例子中，我得到了混合内容的问题。我发现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上可用，它与幼体贴身服务一起工作。

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


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