1.项目架构
项目使用到的技术vue-cli + vue-echarts + sass + axios
2.项目搭建
2.1 安装vue-cli
npm i -g vue-cli
2.2 初始化项目
vue init webpack project-name
image
2.3运行
npm run dev
3.路由history模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
以上是官方文档的原理介绍和使用方式，笔者在本地测试完全没有问题，当项目开发完成打包放到服务器时，如果项目目录不在服务器根目录，会出现路由和资源文件路径找不到的情况,此时页面留白（下文会做处理）
以下为解决方案,配置base路由为服务器项目地址，routers中的所有路由将以“base+path”的形式访问
const router = new VueRouter({
mode: 'history',
base: ' /public/project-name', //值为服务器项目地址
routes: [...]
})
为优化用户体验，routers路由中增加匹配不到的情况统一处理为404页面
routes: [
// 覆盖所有匹配不到的路由
{
path: '*',
component: notFound //404页面组件
},
]
4.网络层axios的封装
- 根据不同环境切换不同的baseUrl
- 对请求前的token校验和请求后的状态码和数据处理
- 控制loading的显示隐藏
import axios from 'axios'
// 根据不同环境设置对应的baseURL
if (process.env.NODE_ENV == 'development') { //开发环境
axios.defaults.baseURL = '/dev';
} else {
axios.defaults.baseURL = location.origin;
}
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 8e3;
const that = this
//请求时的拦截
axios.interceptors.request.use(function (config) {
//发送请求前做的处理
if (that.$store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = `${that.$store.state.token}`;
}
return config
}, function (error) {
//异常请求时作处理
return Promise.reject(error)
})
// 响应时的拦截
axios.interceptors.response.use(function (response) {
if (response.status == 200 && response.statusText == 'OK') {
//返回响应时做一些处理
return response
}
}, function (error) {
throw Error('服务器异常')
if(error.response.status == 404){
alert('接口不存在')
}else if(error.response.status == 550){
alert('服务器异常')
}
//响应异常时做一些处理
return Promise.reject(error)
})
//将axios挂载到vue原型链上暴露为全局
Vue.prototype.$http = axios
封装好之后，在main.js中引入
import $http from '../http/http' //路径自行修改
全局使用
this.$http
.get('http://www.baidu.com')
.then(function(response) {
console.log(response)
})
.catch(function(error) {
console.log(error);
});
}
5.页面刷新导致的问题
项目类型为web APP，点击各自模块展示不同页面，并将此模块tab文字和图片高亮显示,以下为逻辑代码：
<router-link :to="{ path: '/'}" replace exact><img :src="curTabIndex == '1' ? choosedSrc : './static/img/tab_1.png'" alt=""><p>首页</p></router-link>
//此处img的src根据curTabIndex 值来控制显示高亮
export default {
data () {
return{
curTabIndex: 1, //当前点击的tab索引值，默认1(项目首页)
}
},
methods: {
tabClick (index,event) {
this.curTabIndex = index //置为当前索引
}
}
}
复现bug
假设当前有4个tab,当我们点击第三个tab后尝试刷新页面后，注意：此时页面的第一个tab高亮显示,这是因为vue是单页面应用，用户操作页面都是无刷新来更新数据的，此时data中curTabIndex值恢复为默认值1。
解决方案
思路：我们知道单页应用原理为根据不同路由加载不同视图，那么当页面created时可以根据当前页面的路由值(可通过location.pathname获取)来动态修改curTabIndex 值，看代码：
created() {
this.hightImg()
},
methods: {
tabClick(index, event) {
this.curTabIndex = index;
},
hightImg() {
if (location.pathname == "/sec") {
this.curTabIndex = '2' //对应tab2
} else if (location.pathname == "/third") {
this.curTabIndex = '3' //对应tab3
} else if (location.pathname == "/fourth") {
this.curTabIndex = '4' //对应tab4
} else {
this.curTabIndex = '1' //对应tab1
}
}
}
6.打包优化
6.1未优化之前文件大小
未优化之前文件大小
未优化之前资源加载耗时
未优化之前资源加载耗时
优化点：
1.主文件vendor
2.echarts库
优化方案：
1.vue-echart组件库改为按需引入
2.定制echarts库 http://echarts.baidu.com/builder.html
3.路由懒加载
6.2优化后的打包文件
优化后的打包文件
优化后资源加载耗时
优化后资源加载耗时
7.兼容性问题
问题：安卓所有机型自带浏览器页面无法加载(留白)，ios无任何问题。
排查：引用vconsole查找报错。
华为自带浏览器
IE浏览器
注意：eval方法只能在非严格模式中进行使用，在strict mode下是不允许使用这个方法的。
解决方案：
1.针对报错文件单独进行编译，注意4818行代码；
2.在webpack配置文件中添加此文件；
添加配置
网友评论