Some common problems with Nuxt.js (detailed tutorial)

This article mainly introduces the summary and sharing of Nuxt.js pitfalls. Now I share it with you and give you a reference.

Building issues

1. How to introduce js files in the head?

Background: In thetag , introduce the flexible.js file in inline form. This project is mainly a mobile terminal project, and flexible.js is introduced to realize mobile terminal adaptation issues.
Nuxt.js implements header tag management through vue-meta. By viewing the document, we found that it can be configured as follows:

// nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'} ] }

As a result, html is generated:

We found that vue- meta has escaped the quotation marks. After adding __dangerouslyDisableSanitizers: ['script'], these characters will no longer be escaped. Use this field with caution!

Next, replace the content of console.log("hello") with flexible.js. After the configuration is upgraded:

head: { script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}], __dangerouslyDisableSanitizers: ['script'] }

Successfully stepped into the pit, the next pit...

2. How to use preprocessors

Background: Use various preprocessors on