vue 前端优化小技巧

前端优化小技巧

1.history 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问不存在的路由, 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子:

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

location / {
  #设置所有找不到的页面, 跳转到index.html页面
  tryfiles $uri $uri/ /index.html;
}

2.每次加载首页, 页面都是最新的

Nginx

location / {
  #设置某个文件不缓存读取本地，永远走200，拿到最新的
  if ($requestfilename ~* .*\.(?:htm|html)$) {
      addheader Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
  }
}

3.Nginx配置前端接口转发

location /api/ {
    proxypass http://ip:3000/; #这里的转发地址记得改成项目对应的哦
    proxysetheader Host $httphost;
    proxysetheader X-Real-IP $remoteaddr;
    proxysetheader REMOTE-HOST $remoteaddr;
    proxysetheader X-Forwarded-For $proxyaddxforwarded_for;
}