博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue入坑笔记(持续更新)
阅读量:5966 次
发布时间:2019-06-19

本文共 1167 字,大约阅读时间需要 3 分钟。

一、 代码分割,让页面按需加载,加快首屏速率

vue.js构建单页应用虽然能通过路由来实现多页面效果,但是实际上打包后所有的代码都只有一个入口文件app.bundle.js,当项目变得十分庞大的时候,app.bundle.js文件就会非常大,而且用户没有访问到的页面代码也包含在其中,使得首页加载时间延长,非常影响性能和用户体验。

如果我们能把不同路由对应的组件分割成不同的代码块,只在路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来。结合Vue的异步组件和webpackde code splitting feature,我们就轻松实现路由组件的懒加载。

方法很简单,只需要在路由配置中改变模块的引入方式,比如未修改的index模块引入是这样的:

import Indexfrom 'components/index/index'

修改后(其他路由引入类似):

const Index = (resolve) => {  import('components/index/index').then(module => {    resolve(module)  })}

二、将vue项目部署到nginx,刷新页面跳转到404错误页面的问题

clipboard.png

location / {    alias D:\\dist\\;    try_files $uri $uri/ /index.html;}

多个vue项目共享一个域名的方法

  1. index.html文件添加

    <meta base="/app1/">

  2. config/index.js文件

clipboard.png

3.src/router/index.js文件

clipboard.png

  1. Nginx配置修改

将编译好的dist文件夹放在磁盘任意位置,比如D盘

clipboard.png

三、axios.js post application/x-www-form-urlencoded参数问题

请求的方法:

self.axios.post(url, {a: 1, b:2}, {  headers: {    'Content-Type': 'application/x-www-form-urlencoded',  },}).then(response => response.data)  .then(data => {    console.log(data);  });

clipboard.png

这个Form Data后台取不到数据,正常的Form Data数据不是应该是健值对的么,像下面这样:

clipboard.png

解决办法:发送数据前对data进行qs.stringify(data)处理:

var qs = require('qs');

axios.post('/foo', qs.stringify({ 'bar': 123 });

转载地址:http://cotax.baihongyu.com/

你可能感兴趣的文章
数字签名是什么?
查看>>
追捕美国头号电脑通缉犯
查看>>
SPOJ 10234. Here Be Dragons
查看>>
虚机分配静态IP地址
查看>>
dorado基本事件样例
查看>>
USB DATA Toggle
查看>>
C程序设计语言之一
查看>>
关于传值的小问题
查看>>
Unity寻路的功能总结
查看>>
Python访问PostGIS(建表、空间索引、分区表)
查看>>
quick-cocos2d-x开发环境Lua for IntelliJ IDEA的安装
查看>>
Target-Action回调模式
查看>>
换个红圈1微信头像恶搞一下好友
查看>>
Socket网络编程--简单Web服务器(3)
查看>>
20个使用柔和的色调的优秀网站设计示例
查看>>
输入/输出流介绍
查看>>
产品经理应聘之感受漫谈
查看>>
第39周四
查看>>
ylbtech_dbs_article_五大主流数据库模型
查看>>
Java并发专题 带返回结果的批量任务运行 CompletionService ExecutorService.invokeAll
查看>>