Tag Archives: Nuxt.js

[Solved] Nuxt Import qrcodejs2.js / QRCode.js Error: document is not defined

preface

qrcodejs2.js/QRCode.js plug-in is in normal Vue.js project works normally. When you are in nuxt.js when used in the project, there will be an error, because qrcodejs2.js/qrcode.js the plug-in internally uses “browser specific (such as window/document) objects”. When compiled into nuxt.js without these, an error will be generated.

This article will provide you with the way to introduce the plug-in from 0-1, which runs perfectly.

Qrcodejs2.js and QRcode JS can be used.

First step

Download the adapter nuxt.js plug-in core code online.

Step 2

Prepare the file you just downloaded.

Put the QRcode.min.js file into the JS folder under the static static directory of the project (create one if you don’t have one).

Step 3

This step requires you to read the notes carefully, and you must understand why the path is written in this way.

Open the project nuxt.config.js configuration file, add the following code to the head configuration item:

// For now, we are using the local IP address http://192.168.3.5:8001 because we are in a development environment.
// Please replace it when you deploy your project later.
// --------- ---------- ---------- ---------- ---------
// For example, my future website deployment will be: http://www.demo.com
// Then this is how it should be written: http://www.demo.com/js/qrcode.min.js
// [domain + /js/qrcode.min.js]

src: 'http://192.168.3.5:8001/js/qrcode.min.js'

As shown in the following figure, pay attention to the position:

Step 4

At this point, your project can use the plug-in.

Cancel your import Import Code:

Test use

Or the original way of use:

// QRCode The keyword is a wrapped instance of the plugin, you can't change it!
let qrcode = new QRCode(qrcodeImgEl, {
    width: 100,
    height: 100,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
})

NuxtSe rverError:Request failed With status code 500 my solution and thinking

catalog

1、 Source of the problem

2、 Solutions

3、 Solutions

4、 Summary

1、 Source of the problem

Usually using nuxt and deploying it online are normal, and occasionally 500 errors are reported one day;

Nuxt.js The operation ( NPM run dev ) reported the following error:

The server error log is as follows:

0|qiu  |  ERROR  Request failed with status code 500                           20:17:14
0|qiu  |   at createError (node_modules/axios/lib/core/createError.js:16:15)
0|qiu  |   at settle (node_modules/axios/lib/core/settle.js:18:12)
0|qiu  |   at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:201:11)
0|qiu  |   at IncomingMessage.emit (events.js:187:15)
0|qiu  |   at IncomingMessage.EventEmitter.emit (domain.js:441:20)
0|qiu  |   at endReadableNT (_stream_readable.js:1094:12)
0|qiu  |   at process._tickCallback (internal/process/next_tick.js:63:19)

2、 Solutions

500 status code: server internal error, unable to complete the request.

Generally speaking, this problem occurs when the server code fails

So the problem lies in the back end, check the interface

3、 Solutions

Annotate the code one by one, and find an interface error in the page, so that the problem can be solved after the back-end correction;

The error of the request interface is as follows (PHP in the background)

 

It’s a clumsy way to comment the code one by one. If you can, you can directly look at the network of the console to see the interface in error;

4、 Summary

because Nuxt.js It is a framework for server-side rendering. As long as an interface in the page reports an error and the server returns an error, the front-end display page will crash;

And an interface error, nuxt only returns 500 errors, can’t directly locate the problem, need to check one by one, hope nuxt is more and more powerful

 

The wechat app I developed (online):
if you are interested, you can have a look at it and pay close attention to it with one click. Thank you ~
1. Xiaolv depression Test Assistant (wechat APP): a completely free and ad free depression self-test app, which collects questionnaires from global authorities and provides them to you for free. There are novel score records and posters to share, You can see and learn!

Xiaolv depression test assistant

Node.js Using port 80 to report errors in Linux

node. js USES port 80 in Linux to report an error

Because the server USES CentOS8, the local environment is changed to Linux to facilitate development and deployment.

FATAL listen EACCES: Permission denied 0.0.0.0:80
the at Server setupListenHandle [as _listen2] (net. Js: 1296:21)
the at listenInCluster (net. Js: 1361:12)
the at doListen (net. Js: 1498:7)
the at processTicksAndRejections (internal/process/task_queues. Js: 85:21)
✖ Nuxt Fatal Error
Error: listen EACCES: permission denied 0.0.0.0:80
NPM ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xxx dev: nuxt
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xxx.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/xxx/.npm/_logs/xxx-debug.log

solution

initially suspected that port 80 was occupied, but when I checked the port information, I found that port 80 was not occupied, so I should have no permission to use port 80. The simple solution is to add sudo.

Replace NPM run devsudo NPM run dev