第十章、Vue项目的联调上线
抓包
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项目的联调上线的更多相关文章
- vue项目 打包部署上线
1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...
- part11 Vue项目接口联调//真机测试
何为项目接口联调? 前端代码编译好了 后端接口写好了 我们就需要去掉前端模拟数据干掉 用后端提供的数据.进行前后端的一个调试 如何联调? config目录下面 index.js 文件 dev 中pr ...
- vue项目优化与上线
一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2 ...
- Vue 项目打包和上线
1.把绝对路径改为相对路径 我们打开config/index.js 会看到一个build属性,这里就我们打包的基本配置了.你在这里可以修改打包的目录,打包的文件名.最重要的是一定要把绝对目录改为相对目 ...
- vue项目部署上线
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
- 简单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 ...
- 如何快速把 Vue 项目升级到 webpack3
由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...
随机推荐
- Linux命令:ldd
1.ldd不是一个可执行程序,而是一个shell脚本. zlf@ubuntu:~/$ which ldd /usr/bin/ldd zlf@ubuntu:~/$ file /usr/bin/ldd / ...
- Zabbix - 修改默认的 Web 访问URL
背景 CentOS 7 64 Zabbix 4 LTS 使用RPM在线方式安装 修改过程 # 修改默认的访问路径:http://x.x.x.x/zabbix 修改为 http://x.x.x.x/ v ...
- [Linux] Ubuntu 配置nfs
安装NFS Server: 1. 执行命令 "$ sudo apt-get install nfs-kernel-server",安装nfs server 端 2. 创建需要用来分 ...
- nowcoder-548C-Tachibana Kanade Loves Review
链接:https://ac.nowcoder.com/acm/contest/548/C来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 524288K,其他语言10485 ...
- UFT三种录制方式
1.正常录制(Normal Recording) QTP默认的录制模式,这种录制模式是QTP最突出的特点,是直接对对象的操作,可以说此类模式继承了对象模型的所有优点,能够充分发挥对象库的威力.它通过识 ...
- Mybatis 常见面试题
1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...
- 无人工地,原来是靠AI这样运行的
随着全世界逐渐进入老龄化社会,适龄工作人口将急剧减少,必然导致用工成本增加,施工方降低人工成本.提升施工效率和质量的需求会越来越强烈,数字化施工技术应用前景广阔.在过去的十年中,无人机迎来了自己发展的 ...
- 从Surface 3发布 看微软快速转向的根由
3发布 看微软快速转向的根由" title="从Surface 3发布 看微软快速转向的根由"> 平地一声惊雷起,微软突然送惊喜!在毫无征兆的情况下,微软突然发布一 ...
- Python中为什么可以通过bin(n & 0xffffffff)来获得负数的补码?
一开始我以为这不是个大问题,因为本来整型数在内存中就是以补码的形式存在的,输出自然也是按照补码输出的,例如C语言中 printf("%X\n",-3); //输出 //FFFFFF ...
- java的Junit单元测试
函数主要分为以下几类: 1.有固定返回值的.用assert 方法即可. 2.修改了状态. (1)修改了数据库中的数据.可以查询数据库(select 语句),看数据是否发生了改变. --原则上应该是用 ...