前端技术现在真的很热，应用多得让人眼花缭乱！我们对于网页的速度和互动体验的需求也越来越高！另外，关注搜索引擎优化也是个热门话题，Vue怎么样才能实现服务器端渲染，以及如何做到好的SEO优化，都是关键问题！接下来让我一步步跟你解释清楚这些小窍门儿～
什么是SSR？
告诉你，咱们的服务器能自己快速生成HTML网页发给浏览器，速度飞快，还特容易让搜索引擎找到。别看这些网页好像旧版的就不对它们感兴趣了，其实全是精心设计过的，很实用、也很好看！至于那个通用SSR嘛就是说，先在服务器端完整生成静态网页，然后再压缩成动态应用程序，这样你的网页既快速又好看，还有很多有趣实用的互动功能呢～
Vue官方提供的SSR模板工程
vue create my-project
我在vue官方网站上发现了一个超好用的Webpack SSR模板！用它能让你轻松搭建起vue SSR应用，真的很棒！
如何使用Vue实现通用SSR？
npm install vue-server-renderer webpack-node-externals --save
首先，得装个Vue CLI这个软件，这玩意儿能帮咱们建立新项目省事儿多了！接下来就按照提示配置好vue-server-renderer和webpack-node-externals这俩插件，这样项目就能顺畅运行！再往项目中添加entry-server.js和entry-client.js这两份文件，它们就负责在服务端和客户端工作。然后就是修一下那个超级重要的vue.config.js文件，填入服务器和浏览器入口文件的地址。最后别忘了做点儿后备工作，例如再建几个app.js之类的文件，方便管理Vue实例、路由、状态什么的就好了！
启动开发环境
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'
const target = TARGET_NODE ? 'server' : 'client'
module.exports = {
css: {
extract: false
},
outputDir: './dist/' + target,
configureWebpack: () => ({
entry: `./src/entry-${target}.js`,
devtool: 'source-map',
target: TARGET_NODE ? 'node' : 'web',
node: TARGET_NODE ? undefined : false,
output: {
libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
},
optimization: {
splitChunks: TARGET_NODE ? false : undefined
},
externals: TARGET_NODE ? nodeExternals({
allowlist: [/.css$/]
}) : undefined,
plugins: [
TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()
]
}),
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.optimizeSSR = false
return options
})
}
}
搞定前面那步，快来搞搞你的开发环境！打开浏览器，输个设定好的端口号码，就能看到 Vue3 炫酷的 SSR 效果！
import { createApp } from './app'
export default context => {
return new Promise((resolve, reject) => {
const { app, router, store } = createApp()
router.push(context.url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
if (!matchedComponents.length) {
return reject({ code: 404 })
}
Promise.all(matchedComponents.map(Component => {
if (Component.asyncData) {
return Component.asyncData({
store,
route: router.currentRoute
})
}
})).then(() => {
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}
如何进行SEO优化？
import { createApp } from './app'
const { app, router, store } = createApp()
router.onReady(() => {
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}
app.$mount('#app')
})
搜狗对于你网站的META标签信息挺重视的，比如关键词，主页描述啥的。那我们用Vue咋整？用它的服务器渲染功能，加入META标签就成了。编程阶段搞定这些准备事项，上线就能用起来，搜狗也能在搜素窗口找到咱们网站~
利用Meta标签进行SEO优化
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'
Vue.config.productionTip = false
export function createApp() {
const router = createRouter()
const store = createStore()
const app = new Vue({
router,
store,
render: h => h(App)
})
return { app, router, store }
}
兄弟，我们要加个Meta标签在entry-server.js里面。还有，记得把Vue模板也放进web上哈。这样，搜引擎就知道咱们网站是干嘛的！关键字优化和页面描述这些东西都是SEO的小技巧呢～
npm run serve
预渲染优化
npm run build
这款叫prerender-spa-plugin的软件超赞！它能帮你预加载网页内容，省去了等待时间等得心焦的小伙伴们一定会爱死这功能！
结合结构化数据
npm run start
告诉搜索引擎你网页的内容就跟和人分享小秘密似的，让它更懂我们。然后，它就能给我们提供更符合心意的有用信息！
这个小技巧就是教你如何用Vue搞定服务器渲染和搜索引擎优化，这样做能增强网站速度，让大家更快地找到你想要的信息。有了这两招儿，你的网站在网上会更受欢迎，同时也会吸引更多人主动关注你分享的好东西！
评论0