脚本宝典收集整理的这篇文章主要介绍了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 });

脚本宝典总结

以上是脚本宝典为你收集整理的vue入坑笔记（持续更新）全部内容，希望文章能够帮你解决vue入坑笔记（持续更新）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。