Summary and sharing of Nuxt. js, nuxt. js

Summary and sharing of Nuxt. js, nuxt. js

Build Problems

1. How to introduce js files in the head?

Background: In the Nuxt. js uses vue-meta to manage header labels. You can view the document and configure it as follows:

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

Result, generate html:

Copy codeThe Code is as follows:
<Script data-n-head = "true" type = "text/javascript" charset = "UTF-8"> console. log ("hello") </script>

We found that vue-meta had escaped the quotation marks and added _ dangerouslyDisableSanitizers: ['script']. Then, these characters will not be escaped. Be careful when using this field!

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 step on the pit, the next pit...

2. How to use a Preprocessor

Background: After you use a variety of preprocessors on the <template>, <script>, or <style> component, and add the processor, the console reports an error.

<style lang="sass">.red color: red</style>

The solution to this problem is very simple, just install these dependencies.

npm install --save-dev node-sass sass-loader

However, the solution was not smooth. when reading the Chinese document, I ignored the version number and followed the prompts above to find that the solution was unsuccessful. Then I found the solution after debugging. Later, I learned that the Chinese document version is too low. If you need to view the document, you must check the latest English document!

3. How to Use px2rem

Background: Write px in css and convert px to rem through px2rem loader.

In previous projects, it was implemented through px2rem loader, but in the Nuxt. js project, adding css loader is still very laborious because it involves vue-loader.

If you think of another solution, you can use postcss for processing. You can add configurations in the nuxt. config. js file, or in the postcss. conf. js file.

Build: {postcss: [require ('postcss-px2rem ') ({remUnit: 75 // conversion basic unit})]},

4. How to expand webpack configurations

Background: add an alias to the utils directory

As mentioned just now, Nuxt. js has built-in webpack configuration. To expand the configuration, you can add it to the nuxt. config. js file. You can also print the configuration information in the file.

Extend (config, ctx) {console. log ('webpack config: ', config) if (ctx. isClient) {// Add the alias configuration Object. assign (config. resolve. alias, {'utils': path. resolve (_ dirname, 'utils ')})}}

5. How to add vue plugin

Background: A toast vue plugin is encapsulated by the user. Because the vue instantiation process is not exposed, the user does not know at which time to inject it.

You can add the plugins configuration in nuxt. config. js so that the plug-in will be loaded and imported before the Nuxt. js application initialization.

module.exports = { plugins: ['~plugins/toast']}

~ Plugins/toast. js file:

import Vue from 'vue'import toast from '../utils/toast'import '../assets/css/toast.css'Vue.use(toast)

6. How to modify the environment variable NODE_ENV

Background: In the project, set three NODE_ENV values to correspond to different versions. Development, local development; release, prerelease version; production, online version. Among them, the pre-release version is more vconsole than the production version.

// package.json"scripts": { "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build", "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js" },

Print process. env. NODE_ENV.

In the source code of the backpack, find the answer. When the backpack build command is executed, the process. env. NODE_ENV is changed to production and cannot be configured if it is written ......

However, you can only add the _ env attribute under process. ENV, representing NODE_ENV.

In this case, process. env. _ ENV undefined is printed on the page, but process. env. NODE_ENV can be printed.

You can solve this problem by configuring the env attribute in nuxt. config. js.

env: { __ENV: process.env.__ENV}

Development problems

1. Is the Window or Document Object undefined?

Background: when a third-party plug-in is introduced or a window is written directly in the Code, the console will give a warning that the window is not defined.
When this problem occurs, the node server does not have a window or document object. Solution: use process. browser to differentiate the environment.

If (process. browser) {// introduce the third-party plug-in require ('***') // or modify an attribute window. mbk ={} under the window object {}}

Last

This article focuses on the various problems encountered in the project. Any unclear or improper expressions are in this article. You are welcome to criticize and correct them. I hope it will be helpful for everyone's learning, and I hope you can support the house of helping customers more.