Project background
The old official website of the company was created before I joined the company in 2017, which was developed by the old PHP technology stack with coupling before and after. The page UI was ugly 😅. Then, the UI designer redesigned a version after I joined the company in early 2017. In the second reconstruction of the new official website, I began to learn VUE at the beginning of 2018. At that time, VUe2 was used for reconstruction, but after the reconstruction, the old official website remained idle and was not replaced. During this period, I was busy with other important projects of the company, 😂.
Later, in the early nineteen years, the boss and operation colleagues felt that the old official website should be replaced, and required that the SEO problem must be solved. My backend colleagues and I tried using prerender-spa-Plugin with vue-meta to dynamically manage header tags, but this solution only worked for purely static pages with lots of dynamic data, such as lists or details of various types. The previous pre-rendering plug-in could not meet the requirements, there is no way to use this static pre-rendering solution 🙄.
Later, I realized the second scheme, which still adopts the pre – and post-coupling architecture. The Java Thymeleaf template and mY jQuery have rewritten dozens of pages of the whole project, but there is no need to implement CSS, as long as the page with a lot of dynamic data is guaranteed, the data returned by the interface can be normally displayed and rendered DOM. After I spent about two weeks writing the whole page, Java colleagues used Nginx to monitor the dynamic judgment of Baidu crawler UserAgent and jump to the page included by crawler. This scheme is insensitive to users and can theoretically solve our pain points without affecting crawler collection. But later made a other domain name, briefly online for one or two months, Baidu crawler has not been included in the new domain name, randomly give up this scheme 🤔.
Nuxt2 was rebuilt into THE SSR server rendering project at the front end. Nuxt2 started from scratch, learned little by little, and solved many problems from small to large. The underlying architecture and packaging of the project were more complete and robust than the previous single page project constructed by VUE-CLI3, and the development cycle took almost 3 months. Follow-up is according to the operation colleagues to optimize all kinds of small problems, the use of feedback from refactoring development and completion of Beijing company colleagues tested after use, officially launched in October to update replace old website, then has not affected the baidu crawled, later cooperation and Java colleagues made some baidu optimization scheme of the crawler, added a lot of features, It can be said that this scheme is a perfect iteration of the old official website 😎.
This article is here to record and sort out the various difficulties, API problems, bugs, and tutorials (updated from time to time) I have encountered in the process of product development for the business requirements of the project since I started to use Nuxt2 in 19. 😁
PS: at that time also jumped a lot of pit 🤣
The body of the
1. There are some good Nuxt tutorial articles on the Nuggets.
58 ff96 juejin. Im/post /… Juejin. Im/post / 5 bd3fb… Juejin. Im/post / 5 cc81e…
Window is not defined ();
// Use process.client to determine if the window object is a client
if (process.client) {
}
Copy the code3,AsyncData, Fetch, validateScope of use:
These two lifecycle methods can only be used in page components, i.e. components in the Pages directory. Common components in the Components directory cannot use these two lifecycle methods. See zh.nuxtjs.org/api/.
If there are many page modules, for example, take the previous vue2 single page application project as an example. This is the official website of the portal of the previous company. It was reconstructed from jQuery to VUe2 in 2018, and then used Nuxt2 to reconstruct for server rendering at the beginning of 19th.
Take the homepage directory in views directory for example (see figure 1 below). The homepage is divided into 7 vue sub-components according to business function modules. If you copy the folder of vue2 project with Ctrl c – Ctrl v at the beginning of development, it will definitely not work.
The seven subcomponents can only be placed in the components directory of the Nuxt project’s root directory (see figure 2 below), and then imported into the homepache. vue parent in the Pages directory. And the data that these sub-components get from the interface must be written in the two life cycles asyncData and FETCH. In this case, dynamic data can only be obtained in the two life cycles of asyncData and fetch of homepache. vue (parent component of the homePage) in the pages directory, and then transmitted to the sub-component through props or vuex. The sub-component of the business module takes the data transmitted by the parent component and processes and renders it.
After this operation, when viewing the source code of the page on the whole first screen rendering page, the DOM structure of the sub-components of each business module is normally inserted with dynamic data, so SEO crawler can normally climb to it. Similarly, the reconstruction ideas of other pages are the same operation.
Figure 1:
Figure 2:
4, the problem scenario is, for example, take the NewsDetails page: newssid /newsId, when newsId changes, the vue bottom layer will “smart” that the page route does not need dynamic update, so newsId changes, the details page data is still the old data of the previous newsId 😂.
Vue-cli-created project, namely client rendering. In the article page of the detail page type, if there are articles of the same type listed on the right side, then when clicking the jump route, beforeRouteUpdate should be used to determine whether the route from the source is from this route. If so, the detail ID should be updated to the ID in the to route object. Reference the Vue Router official documentation: router.vuejs.org/zh/guide/ad…
The detail page watch listens to newsId and asynchronously requests the detail interface. The component route guard is beforeRouteUpdate
// My code looks like this
beforeRouteUpdate(to, from, next){
next();
// console.log(to, from, next)
if(from.path.indexOf('NewsDetails') != -1) {this.newsId = to.params.newsId;
// Update the details of news information
this.getNewsDetailsData(); }},Copy the codeThe Nuxt server rendered project, when I wrote this page, didn’t have this problem, and the page would normally update the details interface asynchronously and display the correct latest data.
5, Computed property “XXX” was assigned to but it has no setter.
Because VUEX is a one-way flow, V-Model is bidirectional binding. The business scenario of this error is that the modal box of the public component login and Register controls whether the display is hidden or not. My project uses antD Vue UI component library. If the parameter of the modal component is changed from V-Model =”loginModalShow” to: Visible =”loginModalShow”, an error is reported.
You can also create a route.js file in the plugin directory, configure the global guard, and import plugins in nuxt.config.js to take effect.
Refer to the figure below.
