Vue项目的接口联调
修改config/index下的配置项就可以实现接口联调
文章图片
Vue项目的真机测试
直接使用本机的ip进行访问不行,因为vue项目是通过webpack来实现在浏览器预览的,同时webpack-dev-server默认不支持ip访问,所以需要修改package.json配置文件,增加红框中的配置
文章图片
再查看你的电脑ip地址:就可以在手机上根据IP地址来进行真机测试了
可以出现白屏的问题:
- 需要安装babel-polypill插件
npm install babel-polyfill --save
然后在main.js中引入
import 'babel-polyfill'
- 还有在安卓手机上出现点击城市列表页无效的情况:你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true
mounted(){
this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
}
Vue项目的打包上线
直接执行打包的命令:
npm run build
然后将打包的项目交给后端的小伙伴部署就可以了
如果这个打包的项目不是直接放在服务器的根目录下,就需要修改配置文件:
文章图片
例如,你需要将打包的项目放在根目录下的project文件夹下,只需要将上图中绿框中的配置项修改了
assetsPublicPath: '/project',
异步组件实现按需加载
对vue项目进行打包操作,npm run build 命令。生成dist文件夹
文章图片
index.html是我们项目打包出来的入口文件
文章图片
css.map是用来调试css代码的,在线上有用的是.css文件
文章图片
js.map都是辅助文件:
- manifest.js是webpack打包生成的配置文件
- vendor.js是各个页面,各个组件公用的代码
- app.js是项目中各个页面的逻辑代码;例如:在我们访问主页时,不需要访问列表页和详情页的内容,但是我们依然把列表页和详情页的js代码加载进来了
文章图片
这种异步组件加载方法不仅可以用于路由当中,也可以用于组件当中
组件形式的异步加载:
文章图片
项目总结
【vue|Vue实战项目开发 - 项目的联调,测试与发布上线】 提升vue的使用能力:
- 把vue文档左侧没有掌握的知识点自己了解学习达到掌握
- 打开vue核心插件vue-router,掌握vue-router知识点
- 打开vue核心插件vuex,掌握vuex知识点,达到在大型的vue项目中熟练使用vuex
- Vue.js服务端渲染指南
- 使用vue资源中的各种插件(vue官方文档/生态系统/vue资源)
- 最后可以研究vue的源码
推荐阅读
- #|【Vue 路由(vue—router) 一】介绍、基本使用、嵌套路由
- #|【 探讨一下 】Vue的生命周期
- #|【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别
- vue|vue-router 传参(query传参、params传参)
- vue|vuex4实现原理
- web|web前端三大主流框架指的是什么
- 高德地图|vue高德地图实现海量点分组(用icon图标替换海量点)动态循环出groupStyleMap集合
- 前端|【Vue全家桶】--- 第一章(Vue核心)
- VUE|第 1 章( Vue 核心)