最近想用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.json4.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 ，感兴趣能够试用下，性能还在更新中。
以上内容属集体学习总结，如有不当之处，欢送在评论中斧正