12-1 Vue项目的联调测试上线--项目前后端联调
当我们项目开发完成后，我们需要和后端进行联调，那么我们需要把我们项目目录下的static/mock文件删除掉。
此时就需要我们自己更改一下我们本地的代理文件config/index.js中的proxyTable的配置信息
场景一：链接自己电脑php或者Nginx启动的一个后端服务
proxyTable: {
'/api': {
target:'http://localhost:8080',//这个是你本机电脑的ip或者localhost+(自己启动的端口号，如果是80则可以不写)
pathRewrite: {
'^/api':'/static/mock'//这个也是根据提供的api地址来进行相应的修改
}
}
},
场景二：链接后端同事电脑开启的一个后端服务
proxyTable: {
'/api': {
target:'http://192.168.20.22:8080',//这个是同事电脑ip(同一网段)+(同事电脑启动的端口号)
pathRewrite: {
'^/api':'/static/mock'//这个也是根据提供的api地址来进行相应的修改
}
}
},
场景三：链接后端已经把接口服务发布到服务器
proxyTable: {
'/api': {
target:'http://www.***.com:8080',//服务器ip或者域名地址+(服务器端口号)
pathRewrite: {
'^/api':'/static/mock'//这个也是根据提供的api地址来进行相应的修改
}
}
},
更改完配置后，一定要重新启动一下项目ctrl+c结束运行的项目,npm start重启项目
12-2 Vue项目的联调测试上线--真机测试
那么如何在真机预览我们本地运行的制作效果呢？
我们在浏览器运行的是：http://localhost:8080/#/
在手机上我们通过ip来访问本地网址:http://192.168.20.17:8080/#/
想要通过ip来访问需要我们做两点的准备：
1.查看ip
window: ipconfig
mac: ifconfig
2.项目启动更改启动项命令，开启ip访问
在package.json 启动命令中增加：--host 0.0.0.0
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
当我们用真机测试项目的过程中我们可能会遇到这样的问题，就是pc上运行好好的,但是在phone上运行不正常，比如咱们这个项目中，城市页面，当我们滑动右侧字母的过程中，页面也被滑动，那么我们出发点就是阻止页面的touchstart的默认行为增加一个prevent的修饰符
@touchstart.prevent="handleTouchStart"
还有在有些手机上发现页面加载不出来，加载出来的页面是一个空白屏，那是因为一些手机不支持es6的一些语法比如promise等等，那么如何解决这个问题呢？
我们通过一个babel解释器把es6编译成为浏览器识别的es5语法即可
npm install babel-polyfill -S
在main.js中引入 babel-polyfill
import 'babel-polyfill'
这样就顺利解决了一部分手机白屏或者加载不出页面的问题。
12-3 Vue项目的联调测试上线--打包上线
运行下面指令，在我们的项目的根目录下就会生成一个dist文件
npm run build
如果运行结束，看到：Build complete,并且在根目录看到dist文件，那说说明我们打包成功了
把这个dist文件夹给运维或者后端 就行了，让他们帮我们部署到服务器上即可
但是有时候我们的项目并不是直接域名下的一个网址，而是一个文件下的项目，比如：
http://www.***.com/travel 用这样的网址来访问
那么我们在打包的时候，就需要配置一下打包的配置信息
//config/index.js
build: {
....,
assetsPublicPath: '/travel',
...
}
配置好之后，再去执行npm run build
12-4 Vue项目的联调测试上线--异步组件实现按需加载
上面我们打包完以后我们可以查看dist文件夹
static
--js
---app.**.js //业务代码
---manifest.**.js //打包配置文件
---vendor.**.js //公共的包文件
--css
---app.**.css 所有的样式文件
index.html
当项目比较小的时候，我们这样去打包没有什么大问题，但是当我们随着业务代码的开发增加，app.**.js文件会越来越大
这样会导致：初次记载的事件会越来越长，体检降低
那么我们能不能做到，当项目比较大的时候，只加载当前所需要的业务代码呢？这样虽然请求次数增加了，但是不会导致首次加载时间过长。
我们通过异步加载组件的方法来解决这个问题：
1.路由我们可以通过异步加载
通过箭头函数来引入路由：() => import('@/pages/detail/Detail')
//src/router/index.js
//同步写法：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/city',
name: 'City',
component: City
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
//异步写法：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/pages/home/Home')
},
{
path: '/city',
name: 'City',
component: () => import('@/pages/city/City')
},
{
path: '/detail/:id',
name: 'Detail',
component: () => import('@/pages/detail/Detail')
}
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
2.子组件我们也可以通过异步来加载
//同步加载
import HomeRecommend from './components/Recommend'
export default {
name: 'Home',
components: {
...,
HomeRecommend
}
}
//异步组件加载
export default {
name: 'Home',
components: {
...,
HomeRecommend: () => import('./components/Recommend')
}
}
12-5 Vue项目的联调测试上线--课程总结和后续学习指南
写到这里vue的一些基础使用在这个项目中基本上都体现了，可以开发一些初级、中级的项目了。
如果你还想了解更多关于vue一些知识，你可以去vue官网查看关于：
Vue router
vuex
Vue 服务器端渲染
更多Vue资源 awesome-vue
网友评论