Some problems that I usually encounter

Some problems that I usually encounter

Modified the code merge test environment is not synchronized

One is to see if you have saved the other to check the file path (whatever the url jumps to, see if the modified file is wrong)

Small program debugging on real machine reports an error and cannot find a page

Check whether this page is automatically generated in the app.json file

The problem of vue page not rendering (not updating)

1、

Reason for not rendering: Vue responsively updates the view and only reads the data defined in data. Here only an empty object is defined in data, and the page rendering uses an attribute of this object in data. In this case, Vue cannot get this attribute on the object. (The same is true for arrays)

Solve: json way to re-initialize the object, that is, when the object is assigned to the data using JSON.parse(JSON.stringify())manipulation over
the second method is to use the original method set vue body
vue.set (source data object, key, value)

Note: The source data object is defined in data, the key should be a constant caused by '', and the value can be a variable.

You can also use set in nuxt, and in nuxt: this.$set()

Server rendering is unsuccessful (nuxt: asyncData)

• Focus on checking the page- component where the attributes are obtained
• Check if there is data that needs to be rendered on the server side and get it in created() (the data in created may also be loaded on the server side and may be loaded on the client side)
• Check if there is a cookie acquisition. Cookie acquisition can only be done on the client side.
• Check if there are elements controlled by v-if and change it to v-show

The network resource request cannot be no-referrer-when-downgrade

It means that the browser initiates a request without responding
ping mapi.xkw.com
ping 10.1.1.25 to see if it can work

Use v-if to determine the length of the array, arr.length reports an error

First make sure that the array exists, there should be arr && or arr !== undefined && before getting the length of the array

Jump into other pages and come back, the style changes

Jump into other pages and then come back, style changes, mostly style conflicts, look at the styles of the two pages, it
may be global style pollution

Solve the occlusion problem

Using the scrolling module made by better-scroll, if there is a positioning button below it will block the content, the scrolled content will increase a piece of space.

git push file size limit (git push) may report an error

error: RPC failed; HTTP 411 curl 22 The requested URL returned error: 411
fatal: the remote end hung up unexpectedly

It may be because you push too many files at once, you can try the terminal run command

git config http.postBuffer  524288000

Compatibility issues

webview

• Anchor will sometimes fail on ipone phones
• Vertical center height = line-height is invalid (solution: control by padding)
• The input input box can be vertically centered without setting line-height. Setting line-height may affect the vertical bars used to prompt input on some mobile phones.

rem compatibility

https://www.cnblogs.com/webBlog-gqs/p/9139241.html

Mobile phone compatible with safe distance

padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

Server Error

server error

Log in to the server to see the error status. If it is an asynchronous request, copy the request URL first, and visit to see if there is any problem. If there is a problem, it is a back-end problem. If there is no problem, catch it by yourself and see the captured error, err The object will contain the requested path. These contents should be checked

nuxt 502

502 error

502 is generally an error of the upstream server.
Method 1: Report an error 502 by viewing the error log. git bash here
Method 2: Ping the domain name (m.zxxk.com) to see if you can ping through
Method 3: You can also pass (nginx proxy address + request path + parameters) http://10.1.25.53:18121/api/ v1/paper/aggregation?channelId=null&departmentId=null to see if there is a problem with the interface

chrome related

yapi chrome plug-in cross-request cannot be installed

solve