webpack 刷新页面请求地址变了_webpack vue配置后端请求的请求地址 - CSDN
精华内容
参与话题
  • 这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式 这种相对于第一种的话刷新页面页面不会丢失  实现原理 写一个window事件我监听url的变化,那我就能实先路由,那样我就...

    1.url不动式
    url完全不动,即你的页面怎么改变,怎么跳转url都不会改变。这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页

    2.带hash(#)式
    这种相对于第一种的话刷新页面页面不会丢失
        实现原理
    写一个window事件我监听url的变化,那我就能实先路由,那样我就可以根据url的变化,来通过ajax请求参数来渲染页面,一个url对应一个页面,就不会重复。
    window.addEventListener(‘hashchange‘,function(){
    self.urlChange()
    })

    3.无hash(#)式
    这种类型是通过html5的最新history api来实现的   能正常的回退前进,超嗨

    那么问题来了
    第一种方式页面不能刷新,第二种刷新也无妨,因为url并没有改变,请求url从服务器照样能够loading到页面。
    但是第三种就出问题了,我一刷新就loading不到页面就报404页面丢失了。怎么办呢???

    解决方案
    方案一
    通过后台控制404转发到程序入口index.html页面来,让页面能够正常的显示。
    方案二
    通过服务器的nginx配置

    可以去参考下vue的单页面模式路由页刷新解决方案
    http://www.cnblogs.com/kevingrace/p/6126762.html 

     

    转载地址:https://blog.csdn.net/u013234218/article/details/70170837 

    展开全文
  • webpack之devServer配置

    万次阅读 2018-05-10 17:36:00
    DevServer 是webpack开发服务器。首先,下载webpack-dev-server库$ npm i -D webapck-dev-server配置package.json:配置webpack.config.js当运行npm run dev的时候,devServer首先会在内存中创建类似的dist目录,在...

    DevServer 是webpack开发服务器。


    首先,下载webpack-dev-server库

    $ npm i -D webapck-dev-server

    配置package.json:

    配置webpack.config.js

    当运行npm run dev的时候,devServer首先会在内存中创建类似的dist目录,在由浏览器打开进行预览。


    webpack-dev-server其它配置

    devServer.open

    在DevServer第一次构建完成时,自动用浏览器打开网页,默认是true

    open: true

    devServer.openPage

    配置项用于打开指定 URL 的网页。
    openPage: '/different/page'

    同样也可以配置package.json:


    devServer.hot

    启用 webpack 的模块热替换特性。DevServer默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实现预览,开启模块热替换功能后在不刷新整个页面的情况下通过用心模块替换老模块来实现实时预览。

    hot: true

    devServer.host

    devServer.host 配置项用于配置DevServer服务器监听的地址。

    如果你想要局域网中其他设备访问你本地的服务,可以在启动的时候带上 --host 0.0.0.0,也就是在我们的package.json中配置:


    我的IP地址是:10.10.42.3。那么像上图这样配置后,

    局域网内其它机器需要访问:10.10.42.3:8080 。

    本机访问:10.10.42.3:8080 或者 localhost:8080 或者 127.0.0.1:8080


    devServer.proxy

    • 当您有一个单独的API后端开发服务器,并且想要在同一个域上发送API请求时,则代理这些 url 。看例子。
    proxy: {
        '/proxy': {
            target: 'http://your_api_server.com',
            changeOrigin: true,
            pathRewrite: {
                '^/proxy': ''
            }
    }
    • 假设你主机名为 localhost:8080 , 请求 APIurlhttp://your_api_server.com/user/list
    • '/proxy':如果点击某个按钮,触发请求 API 事件,这时请求 urlhttp://localhost:8080/proxy/user/list
    • changeOrigin:如果 true ,那么 http://localhost:8080/proxy/user/list 变为 http://your_api_server.com/proxy/user/list 。但还不是我们要的 url
    • pathRewrite:重写路径。匹配 /proxy ,然后变为'' ,那么 url 最终为 http://your_api_server.com/user/list


    devServer.allowedHosts

    This option allows you to whitelist services that are allowed to access the dev server.

    devServer.allowedHosts 配置一个白名单列表,只有HTTP请求的HOST在列表里才正常返回,使用如下:

    allowedHosts: [
      '.host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ]

    Mimicking django's ALLOWED_HOSTS, a value beginning with . can be used as a subdomain wildcard. .host.com will match host.com, www.host.com, and any other subdomain of host.com.

    .host.com 将匹配 host.com 和 *.host.com

    devServer.compress

    配置是否启用 gzip 压缩。boolean 为类型,默认为 false。

    compress: true
    或者也可以在执行命令的时候添加 --compress


    这个属性到底是影响了哪里的压缩???


    展开全文
  • webpack热更新原理

    万次阅读 2017-05-29 10:51:25
    开发环境页面热更新早已是主流,常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等,都需要借助热更新功能,才能达到实时的端对端的极致体验。 webpack-hot-...

    开发环境页面热更新早已是主流,常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等,都需要借助热更新功能,才能达到实时的端对端的极致体验。

    webpack-hot-middleware

    webpack-hot-middleware中间件是webpack的一个plugin,通常结合webpack-dev-middleware一起使用。借助它可以实现浏览器的无刷新更新(热更新),即webpack里的HMR(Hot Module Replacement)。如何配置请参考 webpack-hot-middleware,如何理解其相关插件请参考 手把手深入理解 webpack dev middleware 原理與相關 plugins
    webpack加入webpack-hot-middleware后,内存中的页面将包含HMR相关js,加载页面后,Network栏可以看到如下请求:

    这里写图片描述

    __webpack_hmr是一个type为EventSource的请求, 从Time栏可以看出:默认情况下,服务器每十秒推送一条信息到浏览器。

    这里写图片描述

    如果此时关闭开发服务器,浏览器由于重连机制,将持续抛出类似GET http://www.test.com/__webpack_hmr 502 (Bad Gateway) 这样的错误。重新启动开发服务器后,重连将会成功,此时便会刷新页面。以上这些便是我们使用时感受到的最初的印象。当然,停留在使用层面不是我们的目标,接下来我们将跳出该中间件,讲解其所使用到的EventSource技术。

    EventSource

    EventSource 不是一个新鲜的技术,它早就随着H5规范提出了,正式一点应该叫Server-sent events,即SSE。鉴于传统的通过ajax轮训获取服务器信息的技术方案已经过时,我们迫切需要一个高效的节省资源的方式去获取服务器信息,一旦服务器资源有更新,能够及时地通知到客户端,从而实时地反馈到用户界面上。EventSource就是这样的技术,它本质上还是HTTP,通过response流实时推送服务器信息到客户端。
    客户端新建一个EventSource对象非常简单。

        const es = new EventSource('/message');// /message是服务端支持EventSource的接口

    服务端实现/message接口,需要返回类型为 text/event-stream的响应头。

        var http = require('http');
        http.createServer(function(req,res){
          if(req.url === '/message'){
            res.writeHead(200,{
              'Content-Type': 'text/event-stream',
              'Cache-Control': 'no-cache',
              'Connection': 'keep-alive'
            });
            setInterval(function(){
              res.write('data: ' + +new Date() + '\n\n');
            }, 1000);
          }
        }).listen(8888);

    我们注意到,为了避免缓存,Cache-Control 特别设置成了 no-cache,为了能够发送多个response, Connection被设置成了keep-alive.。发送数据时,请务必保证服务器推送的数据以 data:开始,以\n\n结束,否则推送将会失败(原因就不说了,这是约定的)。
    以上,服务器每隔1s主动向客户端发送当前时间戳,为了接受这个信息,客户端需要监听服务器。如下:

        es.onmessage = function(e){
          console.log(e.data); // 打印服务器推送的信息
        }

    这里写图片描述

    es可以监听任何指定类型的事件。

        es.addEventListener("####", function(e) {// 事件类型可以随你定义
          console.log('####:', e.data);
        },false)

    服务器发送不同类型的事件时,需要指定event字段。

        res.write('event: ####\n');
        res.write('data: 这是一个自定义的####类型事件\n');
        res.write('data: 多个data字段将被解析成一个字段\n\n');

    使用EventSource技术实时更新网页信息十分高效。实际使用中,我们几乎不用担心兼容性问题,主流浏览器都了支持EventSource,当然,除了掉队的IE系。对于不支持的浏览器,其PolyFill方案请参考HTML5 Cross Browser Polyfills

    CORS

    关于CORS配置可以参考我另一篇博文 前端跨域详解

    nginx配置

    既然说到了EventSource,便有必要谈谈遇到的坑,接下来,就说说我遇到的webpack热更新延迟问题。
    如我们所知,webpack借助webpack-hot-middleware插件,实现了网页热更新机制,正常情况下,浏览器打开 http://localhost:8080 这样的网页即可开始调试。然而实际开发中,由于远程服务器需要种cookie登录态到特定的域名上等原因,因此本地往往会用nginx做一层反向代理。即把 http://www.test.com 的请求转发到 http://localhost:8080 上转发过后,发现热更新便延迟了。
    原因是nginx默认开启的buffer机制缓存了服务器推送的片段信息,缓存达到一定的量才会返回响应内容。只要关闭proxy_buffering即可。配置如下所示:

        server {
            listen       80;
            server_name  www.test.company.com;
            location / {
                proxy_pass http://localhost:8080;
                proxy_buffering off;
            }
        }

    WebSocket

    WebSocket是基于TCP的全双工通讯的协议,它与EventSource有着本质上的不同.(前者基于TCP,后者依然基于HTTP)。关于WebSocket可以参考我另一篇博文WebSocket

    展开全文
  • 本文主要是讲解怎么优化用webpack打包vue-cli创建的项目后的文件,提升页面初始化的加载速度,只提供优化方法,具体实现需要另外查资料。

    最近在公司用vue-cli+webpack开发项目,一开始开发的时候没有注意页面加载速度慢的问题,是在开发好后放到测试服务器上做集成测试的时候,发现第一次访问页面或者open打开一个新tab页的时候加载都很慢,有时候在网速不好的情况下一个页面需要十几秒甚至二十几秒的时间才加载完毕,这样的速度完全影响用户体验。

    于是就开始分析速度慢的原因,打开chrome控制台的network,重新刷新页面,发现请求资源中一个vendor.js文件下载需要十几秒,后来打开文件夹一看,这个js文件竟然有1.5M多,有时候下载时间接近10秒,而且这个文件没下载完,页面是不会开始渲染的。

    这个vendor.js文件是webpack打包后生成的,他是将项目用到的所有第三方依赖包都放到这个文件里,当使用到的包比较多时会显得这个文件很大,所以接下来我们就需要对这个文件进行优化,减少体积。我优化步骤如下:

      1.分析vendor.js体积大的原因

    首先,我先按照网上的建议配置好analyz(一个分析项目文件的体积大的原因,网上很多配置教程,这里不予说明),运行命令后发现vendor.js体积大主要是依赖的element-ui, echarts 和babel-polyfill这三个包比较大。一定要先做这一步,找到文件大的原因,不然无法下手。

      2. 将插件用CDN方式引入

    找到原因后,我将echarts和babel-polyfill这两个插件用CDN的方式在index.html中引入


      3. 组件按需引入

    element-ui本来也可以用CDN的方式引入,但由于我们针对项目的要求改了一点源码,所以就没办法用这个方法了。但之前是将整个elemeny-ui包引入项目,实际上我们在项目中没有用到全部的组件,所以后来就选择按需引入,只引入项目用到的组件,按需引入的配置可以查看element-ui的官网,有说明。

      4.使用webpack的DLLPlugin插件

    之后再运行analyz命令查看,发现vendor.js的体积减小了很多了,从1.5M减小到600多K,但感觉还是有点大,之前在网上有看到可以分离vendor.js, 利用webpack的DLLPlugin插件可以抽离vendor.js的部分包,这个教程网上也有很多,这里我就不再啰嗦了。

      5.服务器开启gzip文件传输

    经过以上的步骤,vendor.js的体积已经减小到了400多K,虽然感觉还是有点大,但相比之前的1.5M已经小很多了。之后我们还开启了gzip压缩传输,就是在服务器上设置,浏览器访问服务器时,如果浏览器支持gzip文件,服务器就返回gizp文件,否则就返回没有压缩的文件,这个方法虽然需要浏览器先支持gzip解压,但现在大部分主流的浏览器均已支持。

      6.服务器设置文件缓存

    最后我们还设置服务器支持缓存,当打包的文件哈希值没有变时,就代表我们的文件没有更改,这时浏览器可以使用缓存的文件,不需要再向服务器请求,只有当请求的文件的哈希值改变或者缓存时间过期时才再一次向服务器请求。

      经过以上的优化后,我们再访问页面时,加载速度从最先开始的十几秒到现在只需要两三秒左右就加载完了,有时候在网速正常的情况下仅需一秒就加载出来了,不过我测试的浏览器是支持gzip文件的。

      最后总结一下,我写的这个性能优化比较简单,相当于只说了可以做些什么来提升性能优化,但具体怎么实现需要另外查资料,网上教程很多,所以这里我没有写得很详细。我当初也是按照网上的教程一步步配置实现的,整个优化过程不难,难的是理解这些实现的原理,需要点耐心研究下,当你真正理解后,你会觉得特别有成就感。







    展开全文
  • 在开发中,我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后,我们需要执行npm run build命令更新js文件,然后再刷新页面,才能看到更新效果。webpack-dev-server...
  • webpack打包(二)(含面试)

    千次阅读 2018-06-02 17:25:29
    处理CSS引入csscss-loader提取css文件extract-text-webpack-plugin3.本地开发服务器:webpack-dev-server路径重定向,支持https,浏览器中可以显示编译错误,可以进行接口代理,模块热更新proxy代理远程接...
  • webpack-dev-server简单使用

    万次阅读 2017-02-09 10:00:40
    dev-server会使用当前的路径作为请求的资源路径,但是你可以通过指定content base来修改这个默认行为:$ webpack-dev-server --content-base build/这样webpack-dev-server就会使用build目录下的文件来处理网络请求。...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 关于Webpack的资料教程网上已经数不胜数,但是对手动配置一个Express server... 首先这两个插件组合起来是可以实现页面的热刷新工作, 而做到这一点,首先要对更改的文件进行监控,编译,而这个webpack-dev-middlewa
  • webpack -- 热更新原理

    千次阅读 2018-07-13 14:44:00
    开发环境页面热更新早已是主流,常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等,都需要借助热更新功能,才能达到实时的端对端的极致体验。 webpack-hot-middleware...
  • vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的...
  • 遇到的问题使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新页面报404错。在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看...
  • 最近需要对webpack详细学习后,给大家分享学习。于是不得不对每一个点进行学习,结果发现webpack涉及到的知识内容好多,自己学习也是一知半解,很多时候脑细胞都死得一片一片的。 注:本文是参考网上多方资料学习后...
  • 每一次修改代码后打包发布到生产环境后,用户需要手动刷新才能获取到最新的代码。 原因 Webpack打包之后会根据文件内容生成一个hash值,然后再按照[name].[hash].js的格式生成文件名; 然后再根据文件的路由对应关系...
  • webpack入门(一)——webpack 介绍

    万次阅读 多人点赞 2016-12-29 23:35:51
    3. 整页刷新的情况越来越少,甚至更多代码在同一个页面。(SPA)因此有很多代码在客户端! 一个体量庞大的代码库需要好好组织。模块系统提供代码库划分成模块的选项。模块系统风格目前有多个标准定义依赖和输出: 1...
  • webpack-dev-server,模块化开发神器

    千次阅读 2017-01-12 09:05:32
    不需要你知道任何东西,webpack-dev-server非常适合你作为新手脚手架,让你体验一把工程化开发、模块化开发的便利。 webpack-dev-server 是个什么东西? webpack-dev-server就是一个基于Node.js和webpack的一个...
  • webpack+vue开发环境搭建

    千次阅读 2018-05-16 11:40:41
    首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像地址。 1,安装淘宝镜像的命令为: npm install -g cnpm --registry=https://registry.npm.taobao.org 2、然后...
  • Webpack入门

    万次阅读 2016-08-11 11:24:47
    Webpack 是什么webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 简单说就是模块加载器,通过使用Webpack,能够像Node.js一样...
  • webpack学习笔记

    千次阅读 2015-08-02 17:07:51
    是什么webpack是一个模块打包工具,通过依赖处理模块,并生成那些模块静态资源。 观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css中可以嵌入图片dataUrl,对于不同...
1 2 3 4 5 ... 20
收藏数 7,541
精华内容 3,016
关键字:

webpack 刷新页面请求地址变了