开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法获取/- localhost 8080不能与webpack开发服务器一起使用

无法获取/- localhost 8080不能与webpack开发服务器一起使用是一个常见的错误信息，通常出现在使用webpack开发服务器时。这个错误的原因可能是由于以下几个方面：

端口冲突：localhost 8080端口可能被其他程序占用，导致webpack开发服务器无法启动。可以尝试修改webpack开发服务器的端口号，例如修改为8081或其他未被占用的端口。
代理配置问题：如果你在webpack配置中使用了代理，可能需要检查代理配置是否正确。代理配置可以用于将特定请求转发到其他服务器，但如果配置有误，可能会导致无法获取/-的错误。
路径配置问题：webpack开发服务器默认会将所有请求都指向根路径(/)，如果你的应用程序的入口文件不在根路径下，可能会导致无法获取/-的错误。可以尝试修改webpack配置，将publicPath设置为正确的路径。
webpack配置错误：如果以上方法都无效，可能是webpack配置文件中存在错误。可以检查webpack配置文件中与开发服务器相关的配置项，确保配置正确。

总结起来，无法获取/- localhost 8080不能与webpack开发服务器一起使用的错误可能是由于端口冲突、代理配置问题、路径配置问题或webpack配置错误所致。需要逐一排查以上可能的原因，并进行相应的修正。

腾讯云相关产品推荐：

云服务器（CVM）：提供弹性计算能力，可满足各种规模的应用需求。详情请参考：腾讯云云服务器
云数据库 MySQL 版（CDB）：提供高性能、可扩展的关系型数据库服务。详情请参考：腾讯云云数据库 MySQL 版
云存储（COS）：提供安全、稳定、低成本的对象存储服务。详情请参考：腾讯云云存储 COS
人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：腾讯云人工智能

以上是腾讯云提供的一些相关产品，可以根据具体需求选择适合的产品来解决云计算领域的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【Webpack】373- 一看就懂之 webpack 高级配置与优化

因为 webpack 打包的是前端代码，其最终会被部署到前端服务器上，而前后端代码通常部署在不同的服务器上，即使是部署在同一个服务器上，所使用的端口也是不一样的，当前端代码通过 ajax 等手段向后端服务器获取数据的时候...但是这样访问又会出现 404 问题，因为其实访问的是 http://localhost:8080/api/test，8080 服务器上是没有该资源的，解决办法就是通过 devServer 配置一个代理服务器...访问 http://localhost:8080/api/test 就会被代理到http://localhost:3000/api/test 上，proxy 还支持路径的重写，如果 3000 端口服务器上并没有...webpack 的 devServer 即 8080 端口的 server，因为是在同一个服务器中请求数据所以也不会出现跨域问题。...，res结果为 7、开启模块热更新: 模块热更新可以做到在不刷新网页的情况下，更新修改的模块，只编译变化的模块，而不用全部模块重新打包，大大提高开发效率，在未开启热更新的情况下，每次修改了模块，都会重新打包

1K3 0

webpack 高级配置与优化，让你的项目飞起来

“ 关注前端开发社区，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步打包多页面应用所谓打包多页面，就是同时打包出多个...因为 webpack 打包的是前端代码，其最终会被部署到前端服务器上，而前后端代码通常部署在不同的服务器上，即使是部署在同一个服务器上，所使用的端口也是不一样的，当前端代码通过 ajax 等手段向后端服务器获取数据的时候...但是这样访问又会出现 404 问题，因为其实访问的是 http://localhost:8080/api/test，8080 服务器上是没有该资源的，解决办法就是通过 devServer 配置一个代理服务器...:8080/api/test 就会被代理到 http://localhost:3000/test 上如果前端只是想 mock 一些数据，并不需要真正的去访问后台服务器，那么我们可以通过 devServer...提供的 before 钩子函数获取到内置的服务器对象进行处理请求，这个内置的服务器对象就是 webpack 的 devServer 即 8080 端口的 server，因为是在同一个服务器中请求数据所以也不会出现跨域问题

1K3 0

学会webpack 高级配置与优化

因为 webpack 打包的是前端代码，其最终会被部署到前端服务器上，而前后端代码通常部署在不同的服务器上，即使是部署在同一个服务器上，所使用的端口也是不一样的，当前端代码通过 ajax 等手段向后端服务器获取数据的时候...// 由于跨域问题无法直接访问到http://localhost:3000下的资源 xhr.open("get", "/api/test"); // 本来是要访问http://localhost:3000...但是这样访问又会出现 404 问题，因为其实访问的是 http://localhost:8080/api/test，8080 服务器上是没有该资源的，解决办法就是通过 devServer 配置一个代理服务器...:8080/api/test 就会被代理到 http://localhost:3000/test 上如果前端只是想 mock 一些数据，并不需要真正的去访问后台服务器，那么我们可以通过 devServer...提供的 before 钩子函数获取到内置的服务器对象进行处理请求，这个内置的服务器对象就是 webpack 的 devServer 即 8080 端口的 server，因为是在同一个服务器中请求数据所以也不会出现跨域问题

7593 0

构建用于生产的React静态化单页面服务原

//生产服务器打包 ----server-dev.js //开发服务器运行 ----static.js //使用webpack-dev运行React --dist //打包后生成的文件.../middleware' const dir = eval('__dirname'), //编译时不执行，运行时在打包之后的环境获取相对位置 port = 8080, maxAge =...用于日常开发 npm run 1-static #-------------------- #使用webpack/server-dev.js启动一个node服务器提供React渲染。...首页提供了3个下拉菜单，前两项用于搜索而最后一个下拉菜单可以选择前端跳转还是通过 服务器跳转。现在我们停掉刚启动的 webpack-dev ，使用开发服务器启动。...在首页（localhost:8080）最右边的下拉菜单选择“前端”然后进行搜索，会发现 nodejs 服务器没有接收到任何请求，而浏览器会出现一个加载效果，等待十几秒之后完成数据组装。

3.7K4 0

Vue路由配置history模式

使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less等，启动测试服务器 localhost:8080, 帮你管理 vue-router等插件。...所以每次当我们使用 npm run dev 的时候，页面会打开一个 localhost:3000 的页面，这其实就是node为我们启动了一个Node.js 静态文件服务器。...前面不是说了，我们vue启动了Nodejs静态文件服务器了吗？为啥还不能直接使用history？...如果你在 history 模式下使用 Vue Router，是无法搭配简单的静态文件服务器的（也就是说你需要配置一下就可以借助这个Nodejs使用history模式了，默认是不提供的）。...例如，如果你使用 Vue Router 为 /todos/42/ 定义了一个路由，开发服务器也已经配置了相应的 localhost:3000/todos/42 响应，但是一个为生产环境构建架设的简单的静态服务器会却会返回

1.4K2 0

Webpack DevServer和HMR原理

Webpack-Dev-Server 为什么要搭建本地服务器 目前开发的代码，为了运行需要有两个操作 npm run build编译通过live-server或者直接通过浏览器打开html文件，查看效果...，然而它也可以作为一个单独的package来使用，以便根据需求进行更多自定义配置搭配一个服务器来使用它，比如express. npm install --save express webpack-dev-middleware.../ :服务器部署时使用，服务器地址 + /js/[name].bundle.js devServer的publicPath、output的publicPath和[webpackDevMiddleware...不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；只需更新需要变化的内容，节省开发时间修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式。...社区已经针对这些有很成熟的解决方案了: 比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验; 比如react开发中，有React Hot Loader

1.9K3 0

「前端必看」这篇Nginx反向代理技巧，助你准时下班陪女神

webpack-dev-server反向代理 0202年了，如果作为开发者的你还不了解反向代理，那么是很有必要去关注下了。我们知道，跨域对于前端而言是一个无法逃避的问题。...具体到开发中就是，我前端仔要从https://dev.xxx.tech这个域名调用后端接口，但是我前端开发服务运行在http://localhost:8080，直接调用后端接口会跨域，被浏览器同源策略阻塞...因此我需要从前端服务器做个代理，这样我就可以用http://localhost:8080/api/user/login这种形式调用接口，就好像在调前端自己的接口一样（因为我访问的是前端的url嘛）。...然而实际上是前端服务器做了一层代理，把http://localhost:8080/api/user/login这个接口代理到https://dev.xxx.tech/user/login。...如果不注释X-Real-IP，前端访问入口的真实IP是127.0.0.1或localhost，Nginx不认可这样的本地ip，直接返回404，客户端请求不予代理到其他远程服务器。

2.1K2 0

webpack介绍、配置、使用

host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。.../dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件 contentBase：告诉服务器从哪里提供内容 // 或者通过以下方式配置...host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。.../dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件 contentBase：告诉服务器从哪里提供内容 // 或者通过以下方式配置...host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。

2.6K1 0

Vue 打包上线后的缓存问题

，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。...那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。让静态资源有缓存好办，问题在于怎么只让index.html不缓存。...这里我们已经不能单单靠前端代码来实现了，需要用到服务器配置。通过服务器配置，来单独设置请求index.html时的header，以达到控制缓存的目的。...启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页 host: 'localhost',//默认是 localhost。...如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址 port: 8080, hot: true,//hot配置是否启用模块的热替换功能

4.9K2 0

webpack基本配置详解_vue基础知识

如果关闭inline， DevServer将无法直接控制要开发的网页。这时它会通过iframe的方式去运行要开发的网页，当构建完变化后的代码通过刷新iframe来实现实时预览。...这类单页应用要求服务器针对任何命中的路由都返回一个对应的 HTML 文件，例如在访问 http://localhost/user 和 http://localhost/home 时都返回index.html...port devServer.port 配置项用于配置 devServer 服务监听的端口，默认使用 8080 端口。如果 8080 端口已经被其他程序占有就使用 8081。...这里不推荐使用，因为不检查主机的应用容易收到 DNS 重新绑定攻击。 overlay devServer.overlay 出现编译器错误或警告时，在浏览器中显示全屏覆盖。...devServer: { overlay: { warnings: false, errors: true, }, }, proxy 当拥有单独的 API 早期开发服务器并且希望在同一域上发送

7543 0

vue.config.js 配置文件

端口号 https: false,// true 配置之后可使用生成 https://localhost:8080/ hotOnly: false,// 热更新（webpack已实现了...如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：复制代码12345JSmodule.exports = { publicPath: process.env.NODE_ENV === '...如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。...提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。...://localhost:4000' } } 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

2.8K0 0

【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

[前言]:因为最近在搞****API的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包，而没有把它纳入到项目开发的“主体过程”中来...然后进入默认的localhost:8080页面： ? 服务器的根目录就是我们工程的目录到这里，我们要做的第一步就成功啦！进入dist后，我们发现报了这样一段错误： ? what?...——它指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。...http://localhost:8080/' ] } 从一个入口变成了两个入口，并实现刷新那怎么才能inline mode模式的刷新呢？...http://localhost:8080/"); var compiler = webpack(config); var server = new WebpackDevServer(compiler,

2.2K7 0

webpack-dev-server 使用教程

webpack-dev-server是我们在开发nodejs必须要掌握的工具，它可以帮助我们快速搭建开发环境。...简单来说，webpack-dev-server就是一个小型的静态文件服务器。...结果这两种方法都将启动一个服务器实例并开始在端口 8080 上侦听来自localhost的连接 webpack-dev-server默认配置为支持在服务器运行时编辑代码时实时重新加载文件常用配置以下只介绍工作中的常用配置...1、iframe模式使用iframe模式无需额外的配置，只需在浏览器输入：http://localhost:8080/webpack-dev-server/index.html 2、CLI命令启动配置...compress: true, host: 'localhost', port: 8080, proxy: { "/api": {

4152 0

别在问我跨域问题了，跨域详解以及前端、后端、运维解决的方法统统写在这里了。

因为前后端都部署到一起。现在前后端分离不管vue /react 面临跨域请求的问题。...webpack-dev-server 前端无论是vue项目还是react 项目大多数都会以webpack-dev-server 来运行，webpack-dev-server 可以设置代理，前端可以在开发环境设置代理解决跨域问题...注意：只限在开发环境，生产环境需要web 服务器同样原理代即可。下面会说明怎么用。...同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。...Access-Control-Request-Method 用于发起一个预请求，告知服务器正式请求会使用哪一种 HTTP 请求方法。 Origin 指示获取资源的请求是从什么域发起的。

26.2K6 10

10 种跨域解决方案（附终极方案）

❝「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。...1.CORS 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。...a.cli 工具中的代理 1) Webpack (4.x) 在webpack中可以配置proxy来快速获得接口代理的能力。...image-20200413161243734 「缺点」无法专递 cookie，原因是因为这个是一个代理库，作者觉得中间传递 cookie 太不安全了。...5.Websocket WebSocket 规范定义了一种 API，可在网络浏览器和服务器之间建立“套接字”连接。简单地说：客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。

3K3 0

10 种跨域解决方案（附终极方案）

重要的说明: 在文中，web 端地址为 localhost:8000 服务端地址为 localhost:8080,这一点希望你能记住，会贯穿全文，你也可以把此处的两端的地址代入你自己的地址。...同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。...1.CORS 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。...a.cli 工具中的代理 1) Webpack (4.x) 在webpack中可以配置proxy来快速获得接口代理的能力。...5.Websocket WebSocket 规范定义了一种 API，可在网络浏览器和服务器之间建立“套接字”连接。简单地说：客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。

2.7K1 2

深入浅出webpack学习1--使用DevServer

使用DevServer 在日常开发中，我们可能需要以下几个功能： 1. 提供HTTP服务而不是使用本地文件预览； 2. 监听文件变化并自动刷新网页，做到实时预览； 3....DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件变更信号，通过websocket协议自动刷新网页做到实时预览。...可以在控制台中看到： Project is running at http://localhost:8080/ webpack output is served from / 这意味着DevServer...启动的HTTP服务监听在http://localhost:8080/, DevServer启动后会一直驻留在后台保持运行，访问这个网址就能获取项目根目录下的index.html。...由于DevServer不会理会webpack.config.js里配置的output.path属性，所以要获取bundle.js的正确URL是http://localhost:8080/bundle.js

9752 0

devServer配置实现跨域

'GET','/api/user',true); xhr.onload=function(){ console.log(xhr.response); } xhr.send(); 此时客户端无法获取数据...，客户端运行在8080端口而服务端运行在3000 这个时候我们可以通过webpack配置跨域方法1 devServer:{ proxy:{ '/api':...'http://localhost:3000'//配置代理 } }, plugins:[ ......当请求/api时会把请求代理到express服务器上此时在进行请求正常返回数据 aa 方法二 proxy:{ '/api':{ target:'http://localhost...api':''} } } 第一种方式是服务端自动api前缀，第二中方法是服务端不带api前缀，而我们请求刚好有添加了api前缀，这个时候可通过上面配置实现在请求的时候将api前缀去掉方法三不使用代理来处理

1.6K2 0

webpack 学习笔记系列05-devserver

Webpack Dev Server 1.1 命令行使用 webpack-dev-server 是一个小型的 express 服务器，它通过 express 的中间件 webpack-dev-middleware...可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局 HMR，可以在不刷新页面的情况下，直接替换、增删模块。...() ] }; 执行 webpack-dev-server，打开 http://localhost:8080 ，当 index.js 修改时能实时看到修改结果。...1.3 proxy 代理 devServer.proxy 可以解决本地开发跨域的问题。...：启动后，自动使用浏览器打开设置的页面 devServer.overlay：是否允许使用全屏覆盖的方式显示编译错误，默认不允许 devServer.port：监听端口号，默认 8080 devServer.host

2.3K13 0

webpack

因为 webpack-dev-server 会启动一个实时打包的 http 服务器，即无法通过 file 协议查看打包效果，需要通过 http 协议查看效果在浏览器中访问 http://localhost...原因：配置了 webpack-dev-server 后，打包生成的文件并没有放在物理磁盘上，而是放到了内存中，可以在 http://localhost:8080/mymain.js（后面是生成的文件名...html-webpack-plugin 的内容，为了看起来更清晰重新执行 npm run dev命令，打开 http://localhost:8080/，可以直接查看效果，也是会实时更新通过插件复制的...打包发布项目开发完成之后，需要使用 webpack 对项目进行打包发布。...原因：开发环境下，打包生成的文件存在于内存中，无法获取到最终生成的文件开发环境下，打包生成的文件不会出现代码压缩和性能优化配置 webpack 的打包发布在 package.json 文件的 script

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭