Vue halaman tunggal boleh melakukan SEO. Kaedah: 1. Perenderan pelayan SSR, membenarkan perangkak enjin carian terus melihat halaman yang diberikan sepenuhnya, membolehkan kandungan tiba dengan lebih cepat; Gunakan Phantomjs untuk memproses perangkak.
Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.
Seperti yang kita semua tahu, aplikasi satu halaman Vue SPA tidak mesra SEO Sudah tentu, terdapat beberapa penyelesaian SEO yang dikaji dan digunakan baru-baru ini berdasarkan Nuxt.js .
Terhad oleh keadaan pembangunan, kod khusus penyemak imbas hanya boleh digunakan dalam fungsi cangkuk kitar hayat tertentu (cangkuk kitar hayat ); sesetengah perpustakaan luaran (pustaka luaran) mungkin memerlukan pemprosesan khas untuk dijalankan dalam aplikasi pemaparan pelayan
Keperluan persekitaran dan penggunaan adalah lebih tinggi dan persekitaran berjalan pelayan Node.js diperlukanSEO yang lebih baik, kerana perangkak enjin carian boleh melihat halaman yang diberikan sepenuhnya secara langsung
Masa yang lebih pantas- kepada kandungan, terutamanya untuk keadaan rangkaian yang perlahan atau peranti yang berjalan perlahan. merujuk kepada pakej npm, dengan operasi dom, contohnya:
, tidak boleh menggunakan Kaedah
if(process.browser){
console.log(window);
}wowjs2.Kaedah Nuxt asyncData, dapatkan data sebelum memulakan halaman, tetapi hanya untuk importkomponen halaman
if (process.browser) {
var { WOW } = require('wowjs');
require('wowjs/css/libs/animate.css');
}masuk Parameter asyncData:
// 并发加载多个接口：
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,
}
}, anda juga mungkin menghadapi ralat ini apabila digunakan dalam talian:
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
}Mengikut <🎜. > pada github nuxt No. Isu 1552 v-if menggesa bahawa
Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.We [as appendChild]4. Terdapat terlalu banyak perangkap, tinggalkan dan kemas kini kemudian. v-if2. Pestatikan v-show
Apabila Nuxt.js melaksanakan menjana pembungkusan statik, penghalaan dinamik akan diabaikan.
Jika anda memerlukan penghalaan dinamik, anda mesti menjana halaman statik terlebih dahulu Anda perlu menentukan nilai parameter penghalaan dinamik dan mengkonfigurasinya dalam tatasusunan laluan.-| pages/ ---| index.vue ---| users/ -----| _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
}
})
})
}
}
}Kelebihan: /users/_id.vuepayload
async asyncData ({ params, error, payload }) {
if (payload) return { user: payload }
else return { user: await backend.fetchUser(params.id) }
}
Kekurangan:
vue cli 3
Konfigurasi:$ cnpm install prerender-spa-plugin --save
=> vue.config.js, yang mengandungi kandungan html.
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'
})
}),
],
};
}
}Kelebihan:
new Vue({
router,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')mode: “history”Perubahan kecil, cuma perkenalkan pemalam
/index.htmlaboutKelemahan: about/index.html
Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。
具体代码戳这里：vue-seo-phantomjs。
要安装全局phantomjs，局部express，测试：
$ phantomjs spider.js 'https://www.baidu.com'
如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
启动之后或者用postman在请求头增加User-Agent值为Baiduspider，效果一样的。
部署上线
线上要安装node、pm2、phantomjs，nginx相关配置：
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服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
如果只是个人博客、公司官网这类，其余三种都可以。
如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，请使用Phantomjs。
Atas ialah kandungan terperinci Bolehkah Vue halaman tunggal melakukan SEO?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![Pertempuran sebenar Vue3 bahagian hadapan [projek vue tulisan tangan]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
