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

This article introduces the "Vue server rendering framework Nuxt steps" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Vue is favored by many front-end developers because of its easy to understand API, efficient data binding and flexible component system. Many domestic companies are using vue for project development, and the brief book we are using is based on Vue.

We know that there are two major pain points in SPA front-end rendering: (1) SEO. The crawler of the search engine is difficult to grab the meta information and other SEO-related information of the page rendered by the client, so that the website can not be searched by users in the search engine. (2) user experience. When a large webApp is packaged, the js can be huge, so you have to load by module, like require.js, asynchronous requests. When webpack prevails, it becomes code segmentation. Even so, due to user devices, the initial rendering of the page may be slow, and the waiting time for the white screen is too long for an increasingly picky user group to accept.

Therefore, for those display promotional pages, such as the official website, server-side rendering (SSR) must be performed.

The configuration of the official SSR document is too cumbersome and requires good experience in using node and webpack. For a front-end rookie, NUXT is officially recommended.

NUXT is a server-side rendering framework based on vue, similar to React's NEXT.

Recently, the company is in the reconstruction project, in order to benefit SEO, we need to use server rendering. After consulting some materials, we chose Nuxt.js,Nuxt.js to be a general application framework based on Vue.js. Details can be found on the official website. Here we mainly record the problems and solutions encountered in the process of use.

Technology stack: Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios

Project construction

Nuxt.js officially provides scaffolding "make sure npx is installed (npx is installed by default in NPM version 5.2.0)"

Npx create-nuxt-app can follow the prompts to choose the configuration that suits her project.

And then npm run dev.

Problems encountered

I. router customization

It is found that many frameworks now have their own set of route generation rules (based on vue-router) and then create directories under the corresponding directory, that is, they will generate their own routes. If there is no requirement for the path of url, this is fine. If you want to customize routes, you need to add some configuration. The details are as follows:

ExtendRoutes (routes, resolve) {routes.push ({name: 'father', / * * custom route name * * / path:' / father', / * * custom route path * * / component: resolve (_ _ dirname, 'pages/father/index.vue') / * * component path * * / children: [{/ * * child routing configuration (other same) * * / name: 'son', path:' / son', component: resolve (_ _ dirname, 'pages/son/index.vue')}, {name:' daughter', path:'/ daughter', component: resolve (_ _ dirname) 'pages/daughter/index.vue')}]})}

Corresponding custom route with reference to the official Nuxt.js

Custom request header (base_url modification based on axios request)

Requirement description: the company's formal environment and special envoy environment correspond to different servers, so you need to add the corresponding request header when making a request. For specific configuration, please see the following code:

Package.json configuration:

"scripts": {"dev": "cross-env NODE_ENV=development PORT=3333 nuxt", / * * Local environment: the environment variable NODE_ENV is specified with the value of the corresponding development and the running port * * / "build": "cross-env NODE_ENV=online nuxt build", / * * Packaging: the value of the environment variable is specified as online * / "start": "HOST=0.0.0.0 PORT=3333 nuxt start" / * * Packaging: specify the value of the environment variable as online port 3333 HOST 0.0.0.0 Baidu 0.0.0.0 represents all the ip addresses of the local machine, that is, those that can be accessed by other machines on the same network segment. The default is 127.0.0.1 because it is bound to the local ip. Therefore, only services bound to the local address can be accessed by other machines on the same network segment * * / "generate": "nuxt generate", "lint": "eslint-- ext .js, .vue-- ignore-path .gitignore.", "precommit": "npm run lint"}

Axios.js configuration:

/ * * Custom request base_url * / if (process.env.NODE_ENV = 'test') {axios.defaults.baseURL =' http://test'} else if (process.env.NODE_ENV = 'online') {axios.defaults.baseURL =' http://online'} else {axios.defaults.baseURL = 'http://127.0.0.1'}

The NODE_ENV used here does not need to be defined because it exists by default in nuxt.js. If you need to declare an environment variable that does not exist, you need to add the following configuration to nuxt.config.js

/ * * A PATH_TYPE variable is declared below, and the rest need not be changed. You just need to change the corresponding NODE_ENV to PATH_TYPE * * / env: {PATH_TYPE: process.env.PATH_TYPE}

Be sure to check the remarks: to run the above example, you need to run npm install-- save-dev cross-env to install cross-env. If you are developing in a non-Windows environment, you do not have to install cross-env, and you need to remove the cross-env from the start script.

Official documents: 1. Host and port configuration 2.dev property modification

Package webpack configuration

The nuxt.js framework has used a set of configurations by default, but after looking at the compiled source code, it is found that the css files are all in the source code, so it is not very good for shrinking the engine's SEO, so the packaging configuration is customized as follows:

Optimization: {runtimeChunk: {name: 'manifest'}, splitChunks: {chunks:' all', cacheGroups: {libs: {name: 'chunk-libs', chunks:' initial', priority:-10, reuseExistingChunk: false, test: / node_modules\ / (. *)\ .js /}, styles: {name: 'chunk-styles' Test: / /. (scss | css) $/, chunks: 'all', minChunks: 1, reuseExistingChunk: true, enforce: true}, extractCSS: true, / * * package css into a separate file By default, all are loaded to have careers * /

Reference documentation: 1.Nuxt.js extracts CSS into a separate CSS file 2. 0. Build configuration

This is the end of the "steps of Vue server rendering framework Nuxt". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.