Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to pre-render the web page in Vue, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Pre-rendering

Typically, a Vue project is a single-page project, that is, a rendered project, with only one index.html.

Such shortcomings are obvious:

To deploy to Nginx, you need to do an internal redirect of try_files $uri $uri/ / index.html before you can access the page via routing.

SEO is not friendly, search engine collection effect is not good.

Pre-rendering is to render the original single index.html into multiple directories, each with an index.html. In this way, there is no need for internal redirect access routing, and it is more convenient for search engines to include.

Prerender-spa-plugin

This pre-rendering uses prerender-spa-plugin for pre-rendering.

Its main principle is to launch the browser, grab the HTML after rendering, and then create a directory and save it as index.html.

Note:

At present, the official website only has Demo of Vue2.x, which actually supports Vue3 (Vue3 is also used in this demonstration)

Although the most recent release is 2018 (a new version should be released recently), it has been maintained and can be used.

Installation

First, we use npm to install:

Npm i prerender-spa-plugin

It should be noted that because prerender-spa-plugin installs a Chromium, it takes a long time to install.

Of course, this dependency is only used when packaging. Therefore, a better way of installation should be:

Npm I prerender-spa-plugin-D project reference

Now, let's refer to the project, which is easy to use and is easy to append in two places:

App.vue

Vue.config.js

App.vue

First, we append the trigger event to the App.vue:

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

Adding this trigger, which is later packaged, will automatically trigger and complete the rendering.

Vue.config.js

According to the prerender-spa-plugin project documentation:

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'],})]}

At the same time, some advanced uses need to introduce PuppeteerRenderer for customization. So, my own vue.config.js configuration:

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', / / corresponding to App.vue renderAfterDocumentEvent: 'render-event',}),}]])}}

I use chained functions. This advantage is that it is convenient for me to make functional judgments such as if-else. Where renderer attribute:

Headless: this is the headless attribute of Chrome and is often used for Debug. For more information, please refer to Google Chrome

ExecutablePath: redirect the browser address; I am redirected to the Chrome browser that comes with my computer. (optional, you can not add it directly. Call Chromium by default)

RenderAfterDocumentEvent: it needs to correspond to the event name of document.dispatchEvent (new Event ('render-event')) in App.vue.

The routes array contains the routing addresses that need to be pre-rendered.

Of course, for more optional parameters, you can also refer to the official documentation:

StaticDir needs to point to the compiled output folder.

Package the project

After that, we can package the project:

Npm run build

The effect of the package:

Look at the pre-rendered page:

Because I have components that use Vue-meta, the pre-rendered file also has the meta attribute.

If you also want to use Vue-meta components with prerender-spa-plugin, you can refer to the article:

Https://juejin.cn/post/7056972997894094861

It is important to note that if something goes wrong, you can try:

# Delete the project node_modulesrm-rf node_modules# and reinstall npm install

Such a file can be deployed.

Deployment effect

We use Nginx for deployment. Last time we went to the Nginx Web folder and modified the config file, we did not need to:

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

To achieve internal redirection. Because there is a real catalog, it can be removed.

However, data proxies are best implemented using Nginx. For example, development environment, data agent:

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}})

The corresponding Nginx configuration can be written as follows:

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/;}

To show you three configurations, set up on demand.

Thank you for reading this article carefully. I hope the article "how to pre-render web pages in Vue" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.