乐趣区

关于vue3:vue3使用vitepluginssr实现ssr

jiezi

最近想用 vue 做个简略的网站，体验下建站的全流程，写篇文章记录下 vue 开发过程。

之前的 vue 开发默认都是用了单页面利用，这次做的时候想到了 SEO，决定尝试下 SSG 模式部署。

为什么用 SSR/SSG

集体网站想要有天然流量，必定要依赖百度、bing 等搜索引擎网站的展现，权重越高越容易被展现，这就是要做好 SEO。VUE 默认状况下都是生成的单页面利用，即 SPA。然而 SPA 对 SEO 优化不敌对。

比方网站有 10 个页面，SPA 是生成独立的利用，齐全加载后在浏览器渲染，因而搜索引擎无奈获取到残缺的页面内容。

应用 SSR 的形式就是把利用生成残缺的 10 个独立页面，只是须要在服务端运行 node 程序实时生成 html，比拟消耗资源。

另一种形式是在 build 的时候间接生成 10 个 html，应用 nginx 部署在服务器上，就能够获取页面残缺内容，更利于 SEO，这就是 SSG。

应用 vite-plugin-ssr 实现 SSR

我的网站是基于 vue3 开发，调研之后，决定应用 vite-plugin-ssr 来实现 SSG，上面介绍下具体实现。

vite-plugin-ssr 官网：https://vite-plugin-ssr.com/

1. 我的项目构造

这里倡议间接应用 vite-plugin-ssr 提供的 vue 示例程序，其中曾经把必要的配置都写好了，能够间接进行二开，十分不便，上面的性能介绍也次要基于这个示例开展。

示例的 Git 地址：https://github.com/brillout/vite-plugin-ssr/tree/main/examples/vue-full

2. 目录及次要文件介绍
  • 开发时，间接在 pages/ 目录下建本人的页面就能够，url 门路就是文件门路
├── components
│   └── Counter.vue
├── package-lock.json
├── package.json
├── pages // 在这里创立网站的页面
│   ├── index.page.vue // 这里默认是“/”门路展现的页面
│   └── star-wars
│       ├── filterMovieData.ts
│       ├── index
│       │   ├── index.page.server.ts
│       │   └── index.page.vue 
│       ├── movie
│       │   ├── index.page.route.ts
│       │   ├── index.page.vue
│       │   └── onBeforeRender.ts
│       └── types.ts
├── readme.md
├── renderer
│   ├── Link.vue
│   ├── PageShell.vue //app.ts 中设置的主入口，其余 vue 页面通过 slot 加载过去
│   ├── _default.page.client.ts // 只在浏览器端执行的代码
│   ├── _default.page.server.ts // 在服务端渲染的时候应用的代码
│   ├── _error.page.vue
│   ├── app.ts // 相似于传统 vue 我的项目中的 main.js，主入口
│   ├── getPageTitle.ts
│   ├── logo.svg
│   ├── types.ts
│   └── usePageContext.ts
├── tsconfig.json
├── types.d.ts
└── vite.config.ts //vite 的配置文件，外面曾经设置好了 ssr 形式渲染
3.build 生成

示例代码中能够间接执行 npm run build 进行渲染，执行实现之后，生成的页面会在根目录的 dist 文件中，这里截取一部分构造如下，

从 dist 外面能够看出，每个页面都生成了独自的 html。

dist
├── client
│   ├── 404.html
│   ├── assets
│   │   ├── chunks
│   │   │   ├── chunk-101896b7.js
│   │   │   ├── chunk-14aa013b.js
│   │   │   ├── chunk-7ada7f48.js
│   │   │   ├── chunk-e09522f2.js
│   │   │   └── chunk-f25c6e66.js
│   │   ├── entries
│   │   │   ├── entry-client-routing.c5745ff9.js
│   │   │   ├── entry-server-routing.8f97ee52.js
│   │   │   ├── pages_hello_index.page.a89cb1f1.js
│   │   │   ├── pages_index.page.5ae1f59b.js
│   │   │   ├── pages_markdown.page.eff232fa.js
│   │   │   ├── pages_star-wars_index_index.page.483154f9.js
│   │   │   ├── pages_star-wars_movie_index.page.9a013b6f.js
│   │   │   ├── renderer_default.page.client.2f145f6f.js
│   │   │   └── renderer_error.page.3707228f.js
│   │   └── static
│   │       ├── default.page.client.c5228f63.css
│   │       └── logo.bebe2e90.svg
│   ├── star-wars
│   │   ├── index.html
│   │   └── index.pageContext.json
│   └── vite-plugin-ssr.json
4.nginx 的配置

生成 dist 之后，能够间接将 dist 目录上传到服务器上。应用 nginx 解决网络申请，nginx 的配置如下：

server {
    listen       80;
    server_name  word-tools.test;

    location / {
        #生成的 dist 文件门路，要写到 client
        root  /opt/app/txt-tools/dist/client; 
        index  index.html index.htm;
    }
  
    error_page   500 502 503 504  /50x.html;
}

配置之后，就能够间接拜访到开发出的页面了。

局部开发记录

1. 批改全局 html 模板

在示例中，最外层的 html 模板是在 _default.page.server.ts 中的，如下代码，

 const documentHtml = escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>${title}</title>
      </head>
      <body>
        <div id="app">${stream}</div>
      </body>
    </html>`

批改这里的 html 就是对全副页面失效，比方要在 head 里加一个<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2. 替换 vue 主模板

示例中应用的 vue 模板入口是PageShell.vue，外面能够写全局导航栏，全局 css 等，其余的 vue 页面都是通过 slot 的形式在生成的时候插入内容，这里看下 template。

<template>
  <div class="layout">
    <div class="navigation">
      <a href="/" class="logo">
        <img src="./logo.svg" height="64" width="64" />
      </a>
      <Link href="/">Welcome</Link>
      <Link href="/markdown">Markdown</Link>
      <Link href="/star-wars">Data Fetching</Link>
      <Link href="/hello">Routing</Link>
    </div>
     <!-- 这里会插入 pages 目录中的 vue 页面 -->
    <div class="content"><slot /></div>
  </div>
</template>

PageShell.vue是通过 app.ts 设置的，代码如下，如果不想有一个对立的 vue 入口，能够批改 render() 办法。

 const PageWithWrapper = defineComponent({data: () => ({Page: markRaw(Page),
      pageProps: markRaw(pageContext.pageProps || {})
    }),
    created() {rootComponent = this},
    render() {
      // 能够批改返回值替换 PageShell
      return h(
        PageShell,
        {},
        {default: () => {return h(this.Page, this.pageProps)
          }
        }
      )
    }
  })

这篇文章次要介绍了下 vite-plugin-ssr 应用 SSG 的形式部署前端页面的初步用法。具体的应用阐明能够参看下官网，是有中文版的。

轻易发下做好的网站地址：https://www.word-tools.com，感兴趣能够试用下，性能还在更新中。

以上内容属集体学习总结，如有不当之处，欢送在评论中斧正

退出移动版