2024年前端最全vue的服务端渲染，字节跳动面试流程

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

错误页面

---

其实nuxt本身自带错误页面的（优点丑，而且错了就啥都看不见），所以我们自定义一个

在layout里新建error.vue

页面找不到

应用发生错误异常

首页

在pages下的users.vue里加上{{ foot.bar }}，注意，这是不存在的，为了让程序出错

{{ foot.bar }}

样式有点丑，可以自己修改的

页面（涵盖异步数据获取）

---

例如定义data数据啥的，和vue是一模一样的！！，不多说

值得注意的是，我们可以设置一些其他的信息，例如页面标题

效果：

可以覆盖掉全局的seo信息

?异步数据的获取

asyncData方法使得我们可以在设置组件的数据之前就能异步获取或处理数据

asyncData//这个会在beforeCreate生命周期钩子之前执行

注意他会在客户端和服务端两端执行

在pages下的users.vue里写

• {{ user.name }}

• 注意事项：

  

  ?上下文对象的使用：

  在pages下的users下的detail.vue中

  

  不传入id就爆了我们需要的错误

  ?整合axios

  如何安装nuxt是没选择axios，那么我们就要整合一下了！

  npm install @nuxtjs/axios -S

  再在nuxt.config.js里配置，用来解决跨域的问题

  modules: [

  // Doc: https://axios.nuxtjs.org/usage

  ‘@nuxtjs/axios’,

  ],

  /*

  ** Axios module configuration

  ** See https://axios.nuxtjs.org/options

  */

  axios: {

  proxy: true

  },

  proxy:{

  “/api”: “http://localhost:3001/”

  },

  当然如果所有页面都启用了ssr那么自然也就不需要跨域了，但通常大家都是首屏启用了ssr，其他页面仍是单页面，所有应当配置跨域

  server目录下建立api.js，定义我们的后端接口，需要安装koa，koa-router，全局安装nodemon，装了就不需要

  const koa = require(“koa”)

  const app =new koa()

  const Router = require(“koa-router”)

  const router = new Router({prefix:‘/api/users’}) //请求地址

  const users = [{name:‘tom’,id:1},{name:‘jey’,id:2}]

  router.get(‘/:id’,ctx => {//带个参数id

  const user = users.find(u => u.id == ctx.params.id)

  if(user){

  ctx.body = {ok:1,user}

  }else{

  ctx.body = {ok:0}

  }

  })

  app.use(router.routes())

  app.listen(3001)

  nodemon api.js来启动这个服务

  _id.vue中

  用户id:{{ $route.params.id }}

  {{ user.name }}

  注意我注释掉的东西，效果如下

  

  ?拦截器实现

  nuxt.config.js里配置

  plugins: [

  ‘~/plugins/axios’

  ],

  在plugins目录下建立axios.js

  //前端请求自动加上token

  export default function({ $axios }){

  //onRequest为请求拦截器帮助方法

  $axios.onRequest(config => {

  if(!process.server){

  // config.headers.token = localStorage.getItem(‘token’)//将来是这个操作

  config.headers.token = ‘jiba’

  }

  })

  }

  这样就完成了一个拦截器，效果看下图network的token

  

  vuex

  ---

  应用根目录下如果存在store目录，Nuxt.js将启用vuex状态树。

  定义各状态树时具名导出state，mutations，getters，actions即可

  注意：也是直接用的，不需要去配置什么，详情看下面教程

  在store目录下建立index.js

  //因为是具名导出，所以state必须是state，mutations必须是…

  export const state = () => ({

  count: 0

  })

  export const mutations = {

  increment(state) {

  state.count ++

  }

  }

  在store目录下建立users.js

  export const state = () => ({

  list: []

  })

  export const mutations = {

  set(state,list) {

  state.list = list;

  },

  add(state,name) {

  state.list.push({name})

  }

  }

  在pages目录下建立mine.vue

  我的
• {{user.name}}

• 注意：

  1.此fetch非彼fetch

  2.store下的index.js是基石，store会自动生成为这个样子

  

  3.fetch的commit后的有规则

  Vue SSR 实战首屏渲染（当然比起nuxt这样很麻烦）

  ---

  ?先创建个vue的项目

  vue create ssr

  ?安装vsr(vue的server渲染器)

  npm install vue-server-renderer --save

  ?一个简单的实例，单独建立个server.js

  const express = require(‘express’)

  const vue = require(‘vue’)

  const app = express()

  const renderer = require(‘vue-server-renderer’).createRenderer()

  const page = new vue({

  data:{

  name: “开课吧”,

  count: 1

  },

  template: `

  {{name}}

  {{count}}

  `

  })

  app.get(‘/’,async function(req,res){//进入这个页面会将组件转为字符串发给前端在页面

  const html = await renderer.renderToString(page)

  res.send(html)

  })

  app.listen(3000,()=>{

  console.log(‘启动成功’)

  })

  效果会是这样

  

  

  ?在vue中构建步骤

  

  首先webpack会把资源会打包成两个包，一个服务，一个客户端，用户访问服务后根据客户端知道找谁，把相应的html渲染出来

  通常前端都是vue单文件组件，用vue-loader构建，所以ssr环境需要webpack怎么操作呢？下面讲解

  路由vue-router

  单页面应用的页面路由，都是前端控制，后端只负责提供数据

  一个简单的单页应用，使用vue-router，为了方面前后端公用路由数据，我们新建router.js，对外暴露createRouter

  npm i vue-router -S

  在src下建立router.js

  import Vue from ‘vue’

  import Router from ‘vue-router’

  import Index from ‘./components/Index’

  import Kkb from ‘./components/Kkb’

  Vue.use(Router)

  export function createRouter () {

  return new Router({

  routes: [

  {path: ‘/’,component: Index},

  {path: ‘/kkb’,component: Kkb}

  //…

  ]

  })

  }

  在components目录下建立Index.vue组件和Kkb.vue

  //index

  hi,{{ name }}

  //kkb

  hi,{{ name }}

  再App.vue中使用路由

  
• 首页
• 开课吧

• csr和ssr设置统一入口

  src下建立createapp.js

  import Vue from ‘vue’

  import App from ‘./App.vue’

  import { createRouter } from ‘./router’

  export function createApp (context) {//context是服务器传来的请求对象

  const router = createRouter()

  const app = new Vue({

  router,

  context,

  render: h => h(App)

  })

  return { app,router }

  }

  main.js里这么做

  import Vue from ‘vue’

  import App from ‘./App.vue’

  import { createApp } from ‘./createapp’

  const { app,router } = createApp()

  Vue.config.productionTip = false

  router.onReady(()=>{

  app.mount(“#app”)

  })

  // new Vue({

  // render: function (h) { return h(App) },

  // }).$mount(‘#app’)

  再在src下建立entry-server.js

  import { createApp } from ‘./createapp’

  export default context => {

  //我们返回一个promise

  //确保路由或者组件准备就绪

  return new Promise((resolve,reject) => {

  const { app,router } = createApp(context)

  router.push(context.url)

  router.onReady(()=>{

  resolve(app)

  },reject)

  })

  }

  服务端渲染，我们需要能够处理.vue组件，所以需要webpack的支持

  最后

  技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

  

  p,router }

  }

  main.js里这么做

  import Vue from ‘vue’

  import App from ‘./App.vue’

  import { createApp } from ‘./createapp’

  const { app,router } = createApp()

  Vue.config.productionTip = false

  router.onReady(()=>{

  app.mount(“#app”)

  })

  // new Vue({

  // render: function (h) { return h(App) },

  // }).$mount(‘#app’)

  再在src下建立entry-server.js

  import { createApp } from ‘./createapp’

  export default context => {

  //我们返回一个promise

  //确保路由或者组件准备就绪

  return new Promise((resolve,reject) => {

  const { app,router } = createApp(context)

  router.push(context.url)

  router.onReady(()=>{

  resolve(app)

  },reject)

  })

  }

  服务端渲染，我们需要能够处理.vue组件，所以需要webpack的支持

  最后

  技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

  [外链图片转存中…(img-sMWFimXf-1715511373629)]