vue入坑筆記（持續更新）

1、 代碼分割,讓頁面按需加載，加快首屏速率

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)
  })
}

2、將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盤

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