Laravel mix 6 hot 和 https

Posted 2023-03-14

【中文标题】Laravel mix 6 hot 和 https

【英文标题】：Laravel mix 6 hot with 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

【参考方案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')
        
      
    )

【讨论】：

谢谢。使用本地开发服务器工作正常。但是，我仍然面临混合内容的问题，但通过使用这种方法很快就解决了：***.com/a/57646910/3088867

是的）感谢您的评论，我会将其添加为解决方案的一部分！）