序言：众所周知，VUE SPA单页应用程序不友好，当然还有相应的解决方案。以下列表列出了一些最近研究和使用的SEO解决方案，SSR和静态化基于NUXT.J。
1。SSR服务器渲染；
2。静态；
3。预先施用spa-;
4。使用它来处理爬行者。
1。SSR服务器渲染
关于服务器渲染：VUE版本和服务器的某些要求有要求，并且需要支持环境。
用SSR称量什么：
优点：
缺点：（开发过程中遇到的水龙头）
1。一组代码和两组执行环境将导致各种问题，例如服务器没有对象，并且处理方法是增加判断，如果是客户端，则将执行：
if(process.browser){ console.log(window); }
例如，请参阅具有DOM操作的NPM软件包：如果无法使用，请改用它：
if (process.browser) { var { WOW } = require('wowjs'); require('wowjs/css/libs/animate.css'); }
2。NUXT方法，在初始化页面之前获取数据，但仅适用于页面组件：
// 并发加载多个接口： async asyncData ({ app, query }) { let [resA, resB, resC] = await Promise.all([ app.$axios.get('/api/a'), app.$axios.get('/api/b'), app.$axios.get('/api/c'), ]) return { dataA: resA.data, dataB: resB.data, dataC: resC.data, } }
获取参数：
1.获取动态路由参数，如： /list/:id' ==> '/list/123 接收： async asyncData ({ app, query }) { console.log(app.context.params.id) //123 } 2.获取url?获取参数，如： /list?id=123 接收： async asyncData ({ app, query }) { console.log(query.id) //123 }
3。如果您使用V-IF语法，则在线部署时可能会遇到此错误：
Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.We [as appendChild]
PS：根据NUXT上的提示1552，将V-IF更改为V-Show语法。
2。静态
静态化是包装NUXT.JS的另一种方法，它是NUXT.JS中的创新点，页面很快加载。
NUXT.JS执行静态包装时，忽略了动态路由。
- | /
--- | .VUE
--- | /
----- | _id.vue
动态路由需要生成静态页面。您需要指定动态路由参数的值并将其配置为数组。
// nuxt.config.js module.exports = { generate: { routes: [ '/users/1', '/users/2', '/users/3' ] } }
运行软件包，您将看到包装页面。
但是，如果路由动态参数的值是动态而不是固定的，该怎么办？
// nuxt.config.js import axios from 'axios' export default { generate: { routes: function () { return axios.get('https://my-api/users') .then((res) => { return res.data.map((user) => { return { route: '/users/' + user.id, payload: user } }) }) } } }
现在，我们可以从//_id.vue访问它，如下所示：
async asyncData ({ params, error, payload }) { if (payload) return { user: payload } else return { user: await backend.fetchUser(params.id) } }
如果您有许多用于动态路由的参数，例如产品详细信息，则可能高达成千上万或数万。接口需要返回所有ID，然后在包装时迭代ID，然后在本地包装它们。如果产品被修改或从货架上取出，则需要重新包装。就大量而言，它也非常缓慢且非常不现实。
优点：
不足的：
3。预先渲染-SPA-
如果您只是用来改善几个营销页面（例如 /， /， /等）的SEO，那么您可能需要预先渲染。您没有使用Web服务器实时动态编译HTML，而是使用预渲染来简单地生成静态HTML文件，以便在构建时间为特定路由生成静态HTML文件。优势在于，设置预渲染并可以将您的前端用作完全静态的站点更容易。
$ cnpm install prerender-spa-plugin --save
VUE CLI 3VUE..JS配置：
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,'dist'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/', '/product','/about'], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; } }
加入main.js：
new Vue({ router, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app')
注意：模式：“”必须设置。
包装后您可以看到该文件，并将其从文件夹 /.html中包装出来，例如：=> /。HTML，其中包含HTML内容。
优点：
不足的：
4。使用爬行者进行处理
它是基于内核的无头浏览器，也就是说，没有UI接口，也就是说，它是一个浏览器，但是需要实现与人造相关的操作，例如点击，页面周转等。
尽管已经宣布了“发展终止”，但已达到了VUE的SEO处理。
该解决方案实际上是一种旁路机制。原则是确定访问ua的来源是否是通过配置访问访问器的访问。如果是这样，请将搜索引擎爬网的请求转发到节点，然后解析完整的HTML并将其退还给爬行者。
单击此处以获取特定代码：vue-seo-。
要安装全球，本地测试：
$ phantomjs spider.js 'https://www.baidu.com'
如果您在命令行上看到推html，那么恭喜，您就征服了。
启动或使用它将用户值添加到请求标头中，效果是相同的。
在线部署
安装节点，PM2和相关配置：
upstream spider_server { server localhost:3000; } server { listen 80; server_name example.com; location / { proxy_set_header Host $host:$proxy_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") { proxy_pass http://spider_server; } } }
优点：
不足的：
总结
如果您建立一个大型网站，例如购物中心，请随时直接使用SSR服务器进行渲染。当然，有相应的陷阱在等您。社区更加成熟，英语更好，所有问题都将得到解决。
如果只是个人博客或公司官方网站，则其他三个很好。
如果您针对已使用水疗中心和支持节点服务器开发的项目进行了SEO优化，请使用它。