抓包

Fiddler

一、解决跨域

proxyTable(查看博客总结)

二、解决用本机ip地址不能访问

在dev中加上 --host 0.0.0.0就可以用本机ip访问,这样的话可以用手机在内网(局域网)里通过这个ip地址访问测试我们的网页

三、解决A/B/C拖动整个页面跟随拖动问题

四、有的手机打开页面是白屏

可能是因为不支持promise,解决这个问题,a.安装 npm install babel-polyfill --save

b.在main.js中引入这个包

c.如果手机还出现白屏问题,那可能跟webpack中dev-server有关系,这时候要发布后的准生产环境测试。

五、打包上线

a.在命令行输入npm run build进行打包

b.打包完成后,根文件夹下会有一个dist文件夹,这个文件夹中的代码就是最终要上线的代码

c.项目放到后端服务器,解决路径配置问题,在配置文件中,找到build(打包配置项),配置     访问路径。把dist文件夹改名为project文件夹,直接放到后端服务器的根目录。就可以通过对应的目录访问

六、异步组件实现按需加载

js文件夹中有三个有用的文件

manifest.js--->webpack打包生成的配置文件

vendor.js--->各个组件各个页面公用的代码

app.js---->项目各个页面的业务逻辑代码

是需要什么,再加载什么,拆分的是app.js

以前直接使用

异步组件加载

只要是组件都可以进行异步加载,比如图

第十章、Vue项目的联调上线的更多相关文章

  1. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  2. part11 Vue项目接口联调//真机测试

    何为项目接口联调? 前端代码编译好了  后端接口写好了 我们就需要去掉前端模拟数据干掉 用后端提供的数据.进行前后端的一个调试 如何联调? config目录下面 index.js 文件 dev 中pr ...

  3. vue项目优化与上线

    一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2 ...

  4. Vue 项目打包和上线

    1.把绝对路径改为相对路径 我们打开config/index.js 会看到一个build属性,这里就我们打包的基本配置了.你在这里可以修改打包的目录,打包的文件名.最重要的是一定要把绝对目录改为相对目 ...

  5. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

  6. 介绍vue项目中的axios请求(get和post)

    一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...

  7. vue项目配置Mock.js

    扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...

  8. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  9. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

随机推荐

  1. Ubuntu navicat试用到期及乱码问题

    对于Ubuntu18.04,navicat试用过期,我这采用的是删掉记录,使其重新试用 网上有的说删掉/home/.navicat64/system.reg,有的又加上删除.update-timest ...

  2. servlet之间传递数据的方式

    Servlet传递数据方式 基本概述 Servlet传递数据的方式有很多,这里提供五种方式: 1.静态变量 2.HttpServletResponse的sendRedirect()方法 3.HttpS ...

  3. JVM简述

    JVM的东西太多了,我们刚开始学java的时候,就会接触堆.栈,还有方法区,因为我们要知道new出来的对象放在哪里,局部变量放在哪里,static修饰的变量放在哪里. 我从网上截一个图: 这里有三大部 ...

  4. spring boot原理分析启动依赖中parent帮我们干了什么

    主要内容: 1:分析spring-boot-starter-parent 这个依赖 通过前面几篇文章的学习,我们感受到了spring boot的魅力.最明显的感觉就是pom.xml文件.代码少了很多. ...

  5. python语法基础-函数-递归函数-长期维护

    ###############    递归   ############## # 递归的定义——在一个函数里再调用这个函数本身 # 递归的最大深度——998 # 二分查找算法 # 你观察这个列表,这是 ...

  6. Contig|scaffold|N50|L50|NG50|贪心算法|de bruiji graph|

    生物信息学 Contig是reads拼成的连续的DNA片段,连续表达一个gene.通过双端测序的contig可确定contig之间的关系得到scaffold,Scaffold是reads拼成的有gap ...

  7. CF-558:部分题目总结

    题目链接:http://codeforces.com/contest/1163 A .Eating Soup sol:在n / 2.n - m.m三个数中取最小值,结果受这三个值限制.但是m == 0 ...

  8. CDN是什么鬼

    CDN,内容分发网络,是大多数互联网业务里必不可少的部分,但大多数互联网从业人员不是特别清楚CDN究竟是什么,以及它可以为我们做哪些事情. 我们还是从之前介绍的<不同的人看到的直播为什么不一样? ...

  9. 3DMAX卸载/完美解决安装失败/如何彻底卸载清除干净3DMAX各种残留注册表和文件的方法

    在卸载3dmax重装3dmax时发现安装失败,提示是已安装3dmax或安装失败.这是因为上一次卸载3dmax没有清理干净,系统会误认为已经安装3dmax了.有的同学是新装的系统也会出现3dmax安装失 ...

  10. 吴裕雄--天生自然 R语言开发学习:高级编程

    运行的条件是一元逻辑向量(TRUE或FALSE)并且不能有缺失(NA).else部分是可选的.如果 仅有一个语句,花括号也是可以省略的. 下面的代码片段是一个例子: plot(x, y) } else ...