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 the tag , 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:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>

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