一、 代码分割,让页面按需加载,加快首屏速率
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项目共享一个域名的方法
- index.html文件添加
<meta base="/app1/">
- config/index.js文件
3.src/router/index.js文件
- 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 });