vue入坑笔记（持续更新）

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

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错误页面的问题

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

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

1. index.html文件添加

   <meta base="/app1/">

2. config/index.js文件

3.src/router/index.js文件

1. Nginx配置修改

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

三、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);
  });

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

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

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