Home > Web Front-end > JS Tutorial > body text

Some common problems with Nuxt.js (detailed tutorial)

亚连
Release: 2018-06-11 15:36:48
Original
4817 people have browsed it

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'}
 ]
}
Copy after login

As a result, html is generated:

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

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(&#39;./assets/js/flexible&#39;), type: &#39;text/javascript&#39;, charset: &#39;utf-8&#39;}],
 __dangerouslyDisableSanitizers: [&#39;script&#39;]
}
Copy after login

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

2. How to use preprocessors

Background: Use various preprocessors on