使用 laravel-mix 在代客安全站点 SSL 错误中进行 Webpack 热重载
Webpack hot reloading with laravel-mix in valet secured site SSL error
我 运行 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
吗?
因此,要使其正常工作,请指示 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
现在热重载在安全代客站点上运行良好
从 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会有警告,您可以接受风险。
然后返回您的常规视图。
一切正常。
只需将 --https 标志添加到您的“热”npm 脚本。只要您拥有 Laravel 后端的有效证书,就可以开始了。
Webpack 开发服务器负责为其服务器生成证书。
"scripts": {
"hot": "mix watch --hot --https",
...
},
我 运行 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
吗?
因此,要使其正常工作,请指示 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
现在热重载在安全代客站点上运行良好
从 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会有警告,您可以接受风险。
然后返回您的常规视图。
一切正常。
只需将 --https 标志添加到您的“热”npm 脚本。只要您拥有 Laravel 后端的有效证书,就可以开始了。 Webpack 开发服务器负责为其服务器生成证书。
"scripts": {
"hot": "mix watch --hot --https",
...
},