最近想用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`
${title}
${stream}
`
修改这里的html就是对全部页面生效,比如要在head里加一个
2.替换vue主模板
示例中使用的vue模板入口是PageShell.vue
,里面可以写全局导航栏,全局css等,其他的vue页面都是通过slot的方式在生成的时候插入内容,这里看下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 ,感兴趣可以试用下,功能还在更新中。
以上内容属个人学习总结,如有不当之处,欢迎在评论中指正
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: Abstracting the New APIs 抽象出新的API
Suppose you want to use action bar tabs as the primary form of top-level navigation in your application. Unfortunately, the Action…