在代客泊车安全站点SSL错误中使用laravel mix热重新加载网页包
我运行到本地主机站点，并使用Webpack dev server编译资产和执行HMR 我通过以下方式在本地保护了在代客泊车安全站点SSL错误中使用laravel mix热重新加载网页包,laravel,webpack,laravel-mix,webpack-hmr,Laravel,Webpack,Laravel Mix,Webpack Hmr,我运行到本地主机站点，并使用Webpack dev server编译资产和执行HMR 我通过以下方式在本地保护了.dev站点 代客泊车安全 运行npm run watch时调用{{mix（'js/app.js'）}}没有问题 但是每当我想通过运行hotnpm脚本来利用热重新加载时，我都会得到这样的结果 GET net:：ERR\u CERT\u AUTHORITY\u无效 GitHub建议添加--https标志，我尝试了，还尝试了--http 我甚至禁用了主机检查的——禁用主机检查标志，清除了
.dev代客泊车安全
npm run watch时调用{{mix（'js/app.js'）}}
没有问题
但是每当我想通过运行hot
npm脚本来利用热重新加载时，我都会得到这样的结果
GET net:：ERR\u CERT\u AUTHORITY\u无效
GitHub建议添加--https
标志，我尝试了，还尝试了--http
我甚至禁用了主机检查的——禁用主机检查
标志，清除了所有可能的缓存，甚至尝试了一个新的git克隆
，但都没有用
这是我的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"
}
}
"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",
如果有帮助的话，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
mix在选项对象中为HMR使用特定的域和端口
webpack.mix.js
//从.env获取应用程序URL并删除协议
让url=process.env.APP\u url.replace（/（^\w+：|^）\/\/，“”）；
混合选项({
H建议：{
主持人:url,，
端口：8080//无法在此处使用443，因为地址已在使用中
}
});
保留--https
标志以指示网页包开发服务器
使用何种协议，但是，删除--禁用主机检查
，因为它是冗余的（谷歌浏览器对.dev
域有严格的SSL策略）
现在假定valet secure
为每个域生成SSL密钥和证书，请指示webpack dev server
在package.json的hot
脚本中也使用它们
{
"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"
}
}
"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",
将/home/caddy/替换为您自己的绝对路径
跑
npm热运行
现在，热重新加载在安全的代客泊车站点上运行良好
在mix6时出现问题。以下是使其在新项目中工作的完整步骤
- 将域添加到.env
替换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添加到刀片视图中，并添加一个元标记以自动将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>
...
转到该刀片视图，打开浏览器控制台，app.js仍应存在SSL错误。手动“在新选项卡中打开文件”，您应该会看到类似的内容。Chrome将发出警告，您可以接受风险
然后回到你的常规视图
事情是这样的