Optimal implementation of front and back end separation using Nuxt.js to quickly build single-page SSR applications

Often we build SSR applications that require our own selection of multiple components to be integrated together

webpack Babel loaders Router server-render various inlet configurations, etc.

For SSR applications built on vue+vuex+vue-router components, you can use the nuxt.js

NUXT simplifies the building and development of SSR applications and provides a complete set of solutions that provide a wide range of presets

Nuxt.js highly integrated with common components

Includes hot update,vue-meta,css-loader,url-loader,vue-template-loader,vue-router
Many presets are available, including automatic routing, automatic Chunckhash, definition of resource storage, Vuex store modularity, 404 pages, loading progress bars, etc.

Nuxt.js integrates a very wide range of components, it is rare to automate, but also maintain a custom configuration, you can add nuxt.config.js in the root directory to configure various components

Nuxt.js community is also very good, code submission is also very frequent

In the personal experience, there are few mistakes in understanding the whole process, and there is no integration error, there is an nuxt/nuxtjs.org project, it is easy to develop SSR applications by reference to this project.

Initializing the application is simple and requires just a few lines of code to create a simple application

NPM INITNPM i Nuxt

Open Package.json, add in Scripts

scripts:[ "start": "Nuxt"]

Add Pages/index.vue, and write:

<Template> 　　 <Div> 　　　　 <H1>welcome!</H1> 　　 </Div></Template><Script>Exportdefault{head: {title:"Home Page"}};</Script>

Run

NPM start

Then you can see the page in the browser, in the development process do not need to close the preview server, add the modified file Nuxt will be automatically updated to the interface

Add Site icon
The site icon is a global link that can be configured in the Nuxt.config.js

Module.exports ="icon""image/png""/favicon.png" }]}}

The favicon.png file is stored in the static directory, the static directory contains some files that do not need to be compiled, and can be accessed directly through the /file name

To modify the package file name Nuxt.config.js:

Module.exports ="Vendor. [Hash].js "" App.[chunckhash].js "}} }

This vendor uses a hash file stamp, which is automatically updated when the third-party module changes
The app uses Chunckhash to generate a file stamp by parsing the portal file, resulting in a hash of the dependent file, which changes when the code is modified

Packaging projects
Add in Package.json scripts

{build: "Nuxt build-a"}

Run

NPM Run Build

The file is generated under the. Nuxt/dist Path
-A Parameters generate the dependency analysis for this build, and you can see the size of each dependent JS by http://127.0.0.1:8888/

Resource file Processing

The resource files are stored uniformly in the assets directory.
NUXT uses Url-loader, when the file is smaller than the set size, will be dataurl, greater than this value, will be copied to the Dist directory
File use hash to define version number, convenient CDN

<src= "~assets/image.png"><src = "/_nuxt/img/image.0c61159.png" >

Nuxt default is for png|jpe?g|gif|svg|woff2?| EOT|TTF|OTF file processing, files larger than 1k will be copied for processing

Static files that do not need to be modified are stored under static, such as robots.txt or sitemap.xml, and the files in that directory are mapped to the root path of the application / down

Default route

The NUXT page file is stored under pages and automatically generates a route based on the file path and name

Pages/index.vue =/pages/about.vue =/aboutpages/user/index.vue =/user/pages /user/_id/index.vue =>/user/:id?

Optimal implementation of front and back end separation using Nuxt.js to quickly build single-page SSR applications