Bagaimana untuk pra-memaparkan halaman web dalam Vue? Analisis ringkas tentang penggunaan prerender-spa-plugin

Bagaimana untuk pra-memaparkan halaman web dalam Vue? Artikel ini akan memperkenalkan kepada anda cara Vue menggunakan prerender-spa-plugin untuk pra-memaparkan halaman web saya harap ia akan membantu anda.

Prapemarahan

Biasanya, projek Vue ialah projek satu halaman, iaitu projek yang diberikan hanya mempunyai satu index.html. [Cadangan berkaitan: tutorial video vue.js]

Kekurangan ini adalah jelas:

• Untuk menggunakan Nginx, anda perlu melakukan try_files $uri $uri/ /index.html pengalihan dalaman, Hanya kemudian anda boleh mengakses halaman melalui penghalaan.
• SEO tidak mesra dan kesan pengindeksan enjin carian tidak bagus.

Dan prapemarahan adalah untuk menjadikan single asal index.html ke dalam berbilang direktori, dan setiap direktori mempunyai index.html. Ini menghapuskan keperluan untuk laluan akses ubah hala dalaman dan lebih kondusif untuk kemasukan enjin carian.

prapaparan-spa-plugin

prapemarahan ini menggunakan prapaparan-spa-plugin untuk prapemarahan.

Prinsip utamanya ialah untuk memulakan penyemak imbas, ambil HTML selepas pemaparan selesai, dan kemudian buat direktori dan simpannya sebagai index.html.

Nota:

• Tapak web rasmi pada masa ini hanya mempunyai Demo Vue2.x, yang sebenarnya menyokong Vue3 (demonstrasi ini juga menggunakan Vue3)
• Walaupun yang terbaru The versi dikeluarkan adalah pada 2018 (versi baharu sepatutnya dikeluarkan baru-baru ini), tetapi ia telah dikekalkan dan boleh digunakan.

Pemasangan

Pertama, kami menggunakan npm untuk memasang:

npm i prerender-spa-plugin

Nota , kerana prerender-spa-plugin akan memasang Chromium, jadi pemasangan akan mengambil masa yang lama.

Sudah tentu, kebergantungan ini hanya digunakan semasa pembungkusan. Oleh itu, kaedah pemasangan yang lebih baik hendaklah:

npm i prerender-spa-plugin -D

Rujukan Projek

Sekarang, mari kita ke rujukan projek Kaedah penggunaannya sangat mudah, dan ia mudah untuk disertakan dua tempat:

• App.vue
• vue.config.js

App.vue

Pertama sekali, kami menambah peristiwa pencetus dalam App.vue:

mounted() {
  document.dispatchEvent(new Event('render-event'))
}

Menambah pencetus ini akan mencetuskannya secara automatik semasa pembungkusan berikutnya dan pemaparan lengkap.

vue.config.js

Menurut prerender-spa-plugin dokumentasi projek:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

Juga diperlukan untuk beberapa penggunaan lanjutan Perkenalkan PuppeteerRenderer untuk penyesuaian. Jadi, konfigurasi vue.config.js saya sendiri:

module.exports = {
    ……
    chainWebpack: config => {
        if (process.env.NODE_ENV == "development") {
        ……
        }
        if (process.env.NODE_ENV == "production") {
            config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [
                {
                    staticDir: path.join(__dirname, 'dist'),
                    routes: [
                        '/', '/processIMG', '/statisticsChars', '/generatePWD', '/calculateTheDate',
                        '/randomNumber', '/textBase64', '/curl', '/mcstatus',
                        '/gh', '/about', '/mdv'
                    ],
                    renderer: new PuppeteerRenderer({
                        headless: false,
                        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
                        // 对应App.vue 
                        renderAfterDocumentEvent: 'render-event',
                    }),
                }])
            ])
        }
    }

Saya menggunakan fungsi rantai. Kelebihannya ialah ia memudahkan saya membuat pertimbangan berfungsi seperti if-else. Antaranya, atribut renderer:

• headless: Ini ialah atribut headless Chrome, yang biasa digunakan untuk Nyahpepijat. Untuk maklumat lanjut, sila rujuk: Google Chrome
• executablePath: Ubah hala alamat penyemak imbas saya menggunakan penyemak imbas Chrome yang disertakan dengan komputer saya untuk ubah hala di sini. (Pilihan, anda tidak boleh menambahnya secara langsung, Chromium akan dipanggil secara lalai)
• renderAfterDocumentEvent: Ia perlu sepadan dengan nama acara document.dispatchEvent(new Event('render-event')) dalam App.vue.

Dan tatasusunan routes mengandungi alamat penghalaan yang perlu pra-diberikan.

Sudah tentu, untuk lebih banyak parameter pilihan, anda juga boleh merujuk kepada dokumentasi rasmi:

staticDir Perlu menunjuk ke folder output yang disusun.

Selepas membungkus projek

, kami boleh membungkus projek:

npm run build

Kesan selepas pembungkusan:

Lihat halaman pra-paparan:

Oleh kerana saya mempunyai komponen menggunakan Vue-meta, fail pra-paparan juga mempunyai atribut meta.

如果你也想用Vue-meta组件配合prerender-spa-plugin，可以参考文章：

https://juejin.cn/post/7056972997894094861

需要注意，如果出现什么错误，可以尝试：

# 删除项目node_modules
rm -rf node_modules
# 重新安装
npm install

这样的文件，就可以进行部署了。

部署效果

我们使用Nginx进行部署，上次到Nginx Web文件夹内，修改config文件，就不需要：

location / {
  try_files $uri $uri/ /index.html;
}

来实现内部重定向了。因为有真实的目录，可以去掉。

但是，数据代理，最好使用Nginx来实现。比如，开发环境，数据代理：

config.devServer.proxy({
        '/dataApiJava': {
            target: JavaBaseURL,
            pathRewrite: {'^/dataApiJava': ""},
            ws: true,
            changeOrigin: true
        },
        '/dataApiPython': {
            target: PythonBaseURL,
            pathRewrite: {'^/dataApiPython': ""},
            ws: true,
            changeOrigin: true
        },
        '/ghs': {
            target: GithubSpeedURL,
            pathRewrite: {'^/ghs': ""},
            ws: true,
            changeOrigin: true
        }
    }
)

对应的Nginx配置，可以这样写：

location /dataApiPython/{
      proxy_pass http://127.0.0.1:8099/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
}
location /dataApiJava/ {
      proxy_ssl_server_name on;
      proxy_pass https://…….cn/;
}
location /ghs/ {
      proxy_ssl_server_name on;
      proxy_pass https://……/gh/;
}

给大家展示三种配置，按需设置哦。

END

到此，我们的前端预渲染就完成了。这样SEO好。但是对比SSR，还是优点欠缺。好处就是部署和配置方便，坏处就是构建麻烦，如果你页面有几十个路由需要预渲染，那么prerender-spa-plugin渲染起来就没SSR方便了。

改天有机会和大家分享分享SSR吧,真不错，又挖一个坑。

另外，是不是有小伙伴好奇，我截图里出现的CompressionPlugin属性？其实是gz压缩啦。有机会和大家分享，使用compression-webpack-plugin来优化项目。

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Bagaimana untuk pra-memaparkan halaman web dalam Vue? Analisis ringkas tentang penggunaan prerender-spa-plugin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!