vue渐进式框架-路由守卫及图片模块化处理

一、路由守卫是什么？

概念：把原来没有条件限制的路由跳转添加上限制条件。

//全局的路由守卫

router.beforeEach((to,from,next)=>{
})


//局部的路由守卫

beforeRouteEnter(to,from,next){
}

---

二、BSR与SSR

---

• 视图：view + 模型数据Model

• BSR：客户端渲染：视图与数据的组装是在客户端完成的。

• SSR：服务器渲染：视图与数据的组装是在服务器端完成的。

---

BSR的优势和劣势有哪些？

• 前后端分离
• 数据化应用，交互更加丰富
• 前端工程师来讲价值更高
• SEO有严重劣势（SEO优化非常差）
• 在ToB产品上应用更广泛（不需要考虑SEO优化）

SSR的优势和劣势有哪些？

• 前后端不分离，对后端的要求非常高
• 有利于SEO（利于爬虫使用）
• 对客户端的压力比较小，服务器压力较大
• 在ToC产品上应用更广泛（需要考虑SEO优化）

SEO优化

• 搜索引擎优化

SEO优化策略：官网、移动官网，主要针对ToC的产品

• 尽可能多的使用h1-h6标签
• 多使用html语义化标签，header、footer、article、nav、aside…
• 给标签加上title属性
• 使用meta元属性，添加关键词
• 给图片加上alt属性

SEO优化的原则：尽量减少JS、CSS功能，因为爬虫爬取不到，要尽可能多的使用HTML

Vue SSR的发展

• Next.js React的服务端渲染框架
• Nuxt.js Vue的服务端渲染框架

只能依赖Node.js平台进行开发，核心库vue-server-renderer 原理：使用vue-server-render在Node.js服务端把Vue组件转化成静态HTML字符串，返回给客户端，数据与视图的组装也是发生在服务端的。

Nuxt.js也是一个脚手架

• 在服务端渲染时不需要配置路由，自动会配置路由

  <Nuxt  /> 视图容器
  相当于<router-view>

---

三、环境及跨域的处理

生产环境

• 部署在很稳定的服务器上供广大用户使用，国内如：阿里云、腾讯云、百度云、华为云，国外如：亚马逊云

开发环境

• 公司内部搭建开发环境，指本地

测试环境

• 公司内部搭建测试环境

---

服务器代理解决跨域

• 在脚手架环境下使用这种方式解决跨域，只对开发环境有用，对测试环境和生产环境没有用。在测试环境和生产环境下，如果产生了跨域，后端使用Nginx等服务器做代理配置。（Nginx是俄罗斯的一个开发团队创建的。）

四、图片的模块化管理

当前端项目打包（npm run build）前，至少要考虑到这两个问题

• api的baseURL要修改成线上的远程服务器地址
• 图片的url：上线时，要考虑项目中所使用到图片的线上地址

应用程序中的图片来源

• 来自远程服务器：当图片比较大时，建议放在public目录，
• 来自本地assets目录，当图片很小时，建议放在assets中
• 来自本地静态资源服务器public目录

---

• 放在public中的图片是不会被webpack处理的，所以项目中使用到的大图片，一定要放在public中，以方便最终项目上线做图片优化。
• 放在assets中的图片，会被webpack处理，一般小图片放在该目录，这些图片一般不需要做优化，融合成代码的一部分。
• 在代码中尽量减少background-image的使用，因为它的路径只能写成相对或绝对路径，无法进行图片模块化，不便于维护

// 把assets中的图片资源，当作模块导入进来
import logo from '@/assets/img/logo.png'

const imgBaseUrl = 'http://img13.360buyimg.com'
const pubBaseUrl = '/images'  // 指向本地的静态资源服务器

export default {
  // 从远程图片服务上导入的图片路径
  feedIcon: imgBaseUrl+'/jdphoto/jfs/t9715/362/323851365/1279/81de6d72/59cc5903N7d14ca0e.png',
  appIcon: imgBaseUrl+'/jdphoto/jfs/t9196/304/2362310772/2730/775aea35/59cc5931Nd495934f.png',
  loginIcon: imgBaseUrl+'/jdphoto/jfs/t9052/339/2338090052/1443/912da0a4/59cc5951N10f8f9b3.png',
  // 从本地静态资源服务器中导入的图片路径
  logo2: pubBaseUrl + '/logo.png',
  // 从src源码中导入的图片模块
  logo
}

---

五、vue.config.js中的常用字段

publicPath字段

• 是vue.config.js中的一个字段，作用是给资源路径加一个前缀

module.exports{
	publicPath: './aa/webapp',
}

filenameHashing字段

• 是vue.config.js中的一个字段，设置为false会使哈希值失效
• hash缓存原理：为了解决浏览器缓存的问题，当有静的资源文件发生改变时，打包会有新的哈希值，从而促进浏览器重新请求资源，发生代码更新。

pages字段

• 是vue.config.js中的一个字段，用于多页面应用程序的配置，不需要路由，通过超链接跳转，（单页面是通过路由的创建与销毁进行跳转的）。

     pages: {
       index: {
         // page 的入口
         entry: 'src/main.js',
         // 模板来源
         template: 'public/index.html',
         // 在 dist/index.html 的输出
         filename: 'index.html',
         // 当使用 title 选项时，
         // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
         title: '2006',
         // 在这个页面中包含的块，默认情况下会包含
         // 提取出来的通用 chunk 和 vendor chunk。
         chunks: ['chunk-vendors', 'chunk-common', 'index']
       },

// 背后的原理是因为入口文件不一样，资源都是可以复用的

---