使用 laravel-mix 在代客安全站点 SSL 错误中进行 Webpack 热重载

Question

我运行 Laravel Valet to host sites locally, and Laravel Mix 编译资产并使用 Webpack 开发服务器执行 HMR

我通过

在本地保护了 .dev 站点

valet secure

当运行 npm run watch

时调用 {{ mix('js/app.js') }} 没问题

但是每当我想通过运行 hot npm 脚本利用热重载时，我得到这个

GET https://localhost:8080//css/app.css net::ERR_CERT_AUTHORITY_INVALID

GitHub 问题建议添加 --https 标志，我试过了，也 --http

我什至通过 --disable-host-check 标志禁用了主机检查并清除了所有可能的缓存，甚至尝试了一个新的 git clone 但无济于事

这是我的 package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@kazupon/vue-i18n-loader": "^0.3.0",
        "cross-env": "^5.1",
        "eslint-plugin-vue": "^5.2.3",
        "laravel-mix": "^4.0.7",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.21.0",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "algoliasearch": "^3.33.0",
        "axios": "^0.19.0",
        "font-awesome": "^4.7.0",
        "jquery": "^2.1.1",
        "lato-webfont": "^2.15.1",
        "modernizr": "^3.7.1",
        "raleway-webfont": "^3.0.1",
        "raphael": "^2.1.4",
        "vlightbox": "^2.0.2",
        "vue": "^2.5.17",
        "vue-i18n": "^8.12.0",
        "vue-instantsearch": "^2.2.1"
    }
}

和webpack.mix.js如果有帮助

const mix = require('laravel-mix');

// Extend Mix with the "i18n" method, that loads the vue-i18n-loader
mix.extend('i18n', new class {
    webpackRules() {
        return [{
            resourceQuery: /blockType=i18n/,
            type: 'javascript/auto',
            loader: '@kazupon/vue-i18n-loader',
        }, ];
    }
}(), );

// Call the .i18n() (to load the loader) before .js(..., ...)
mix.i18n()
   .js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

我做错了什么？这可以重现吗？我也应该找到一种方法来保护 localhost:8080 吗？

Answer 1

因此，要使其正常工作，请指示 laravel 在选项对象中混合使用 HMR 的特定域和端口

webpack.mix.js

// Get the APP_URL from .env and remove protocol
let url = process.env.APP_URL.replace(/(^\w+:|^)\/\//, '');
mix.options({
   hmrOptions: {
       host: url,
       port: 8080 // Can't use 443 here because address already in use
   }
});

保留 --https 标志以指示 webpack-dev-server 使用什么协议，但是，删除 --disable-host-check 因为它是多余的（Google Chrome .dev 域的严格 HSTS 策略）

既然 valet secure 为每个域生成了 SSL 密钥和证书，请指示 webpack-dev-server 在 package.json[=25 的 hot 脚本中也使用它们=]

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js
--inline --hot --https
--key /home/caddy/.valet/Certificates/laravel.dev.key
--cert /home/caddy/.valet/Certificates/laravel.dev.crt --config=node_modules/laravel-mix/setup/webpack.config.js",

replace /home/caddy/ by your own absolute path

运行

npm run hot

现在热重载在安全代客站点上运行良好

Source

Answer 2

从 mix6 开始就有问题。以下是让它在新项目中运行的完整步骤。

将域添加到您的 .env

APP_DOMAIN=example-app.test

替换 package.json

中的脚本

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot --https",
        "prod": "npm run production",
        "production": "mix --production"
    },

编辑您的 webpack.mix.js

const mix = require('laravel-mix');
const fs = require("fs");
const path = require("path");

const homeDir = process.env.HOME;
const host = process.env.APP_DOMAIN

mix
    .options({
        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(),
                ca: fs.readFileSync(path.resolve(homeDir, `.config/valet/CA/LaravelValetCaSelfSigned.pem`)).toString(),
            },
        },
        hmrOptions: {
            host: host,
            port: 8080
        }
    })
    .js('resources/js/app.js', 'public/js')

将混合 JS 添加到 blade 视图，加上元标记以自动将 http 请求升级为 https

    <head>
      <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
        ...
    </head>
    <body class="antialiased">
        <div id="app"></div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>

转到 blade 视图，打开浏览器的控制台，app.js 应该仍然是 SSL 错误。手动“在新选项卡中打开文件”，你应该会被带到类似 https://example-app.test:8080/js/app.js 的地方。 Chrome会有警告，您可以接受风险。

然后返回您的常规视图。

一切正常。

Answer 3

只需将 --https 标志添加到您的“热”npm 脚本。只要您拥有 Laravel 后端的有效证书，就可以开始了。 Webpack 开发服务器负责为其服务器生成证书。

"scripts": {
    "hot": "mix watch --hot --https",
    ...
},

使用 laravel-mix 在代客安全站点 SSL 错误中进行 Webpack 热重载

Webpack hot reloading with laravel-mix in valet secured site SSL error

laravel

webpack

laravel-mix

webpack-hmr