如何解决如何在Webpack Dev Server热重装中从URL中删除端口?
我正在使用别名在本地主机端口80上运行我的应用程序(PHP后端需要此程序) 前端使用代理在端口3000上与VueJs + Webpack + Hot Module Reload一起运行。
我设置了it
,一切都很好,但是我不知道如何从网址中删除webpack.config.js
。
如果我打开:3000
而不是http://my-alias
,则热模块重新加载将失败,并且
http://my-alias:3000
以下是我的[HMR] Update Failed: SyntaxError: Unexpected token < in JSON at position 0
的摘录:
webpack.config.js
有什么主意吗?
解决方法
您需要设置服务器的公共URL。
module.exports = (env,argv) => {
return {
...
devServer: {
...
public: 'http://my-alias',...
},
https://webpack.js.org/configuration/dev-server/#devserverpublic
,就我而言,它是一个带有 PHP 后端的 React 应用程序,我没有使用别名,我只是在我的 index.php 中添加了脚本名称并定义了根 div(这仅用于开发配置环境)。
<?php
// index.php at http://localhost/
?>
<div id="root"></div>
<script src="http://localhost:3000/">
<script src="http://192.168.1.111:3000/static/js/bundle.js">
<script src="http://192.168.1.111:3000/static/js/vendors~main.chunk.js">
<script src="http://192.168.1.111:3000/static/js/main.chunk.js">
//...
在 webpack 中添加 CORS 中间件,以便能够从其他域(不同端口)加载 js 文件。
const corsMiddleWare = (req,res,next) => {
res.append('Access-Control-Allow-Origin',['*']);
res.append('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
res.append('Access-Control-Allow-Headers','Content-Type');
next();
}
//...
before(app,server) {
//...
app.use(corsMiddleWare);
//...
Webpack 输出配置中的 crossOriginLoading
和 publicPath
output: {
/* your config */
crossOriginLoading: 'anonymous',publicPath: 'http://localhost:3000/',}
使用此配置,我可以访问 http://localhost
,运行 React 应用程序,并且热重载工作正常,在您的情况下,您可以执行相同的步骤或仅更新 publicPath
。>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。