entry-server.ts 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { createApp } from './main'
  2. import { renderToString } from 'vue/server-renderer'
  3. export async function render(url: string,manifest:any) {
  4. const { app, router, store } = createApp()
  5. await router.push(url)
  6. await router.isReady()
  7. const matchedComponents = router.currentRoute.value.matched.flatMap(record =>Object.values(record.components))
  8. //对所有匹配的路由组件调用`asyncData()
  9. await Promise.all(matchedComponents.map((Component:any) =>{
  10. if(Component.asyncData){
  11. return Component.asyncData({
  12. store,
  13. route: router.currentRoute
  14. })
  15. }
  16. }))
  17. const context:any = {}
  18. const appHtml = await renderToString(app,context)
  19. const state = store.state
  20. // preloadLinks 文件预加载
  21. if(import.meta.env.PROD){
  22. const preloadLinks = renderLinks(context.modules,manifest)
  23. return { appHtml, state, preloadLinks }
  24. }else{
  25. return { appHtml, state }
  26. }
  27. }
  28. //文件路径获取
  29. function renderLinks(modules:any,manifest:any){
  30. console.log(90,modules)
  31. let links = ""
  32. modules.forEach((id:any) => {
  33. if(id){
  34. const files = manifest[id]
  35. if(files){
  36. files.forEach((file:any)=>{
  37. links += renderPreloadLink(file)
  38. })
  39. }
  40. }
  41. });
  42. return links
  43. }
  44. //文件格式
  45. function renderPreloadLink(file:any){
  46. if(file.endsWith('.js')){
  47. return `<link rel="modulepreload" crossorigin href="${file}">`
  48. }else if(file.endsWith('.css')){
  49. return `<link rel="stylesheet" href="${file}">`
  50. }else if(file.endsWith('.woff')){
  51. return `<link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
  52. }else if(file.endsWith('.woff2')){
  53. return `<link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
  54. }else if(file.endsWith('.gif')){
  55. return `<link rel="preload" href="${file}" as="image" type="image/gif">`
  56. }else if(file.endsWith('.jpg')){
  57. return `<link rel="preload" href="${file}" as="image" type="image/jpg">`
  58. }else if(file.endsWith('.png')){
  59. return `<link rel="preload" href="${file}" as="image" type="image/png">`
  60. }else{
  61. return ''
  62. }
  63. }