Tag Archives: front end

Jest Vue $route error [How to Modify]

Jest Vue $route reported an error

When you run jest, you will always report errors in the page that uses $route. When you add the following code to jest, you will report other errors

FALSE:

test('Create groupManage data', async (done) => {
    wrapper.vm.$nextTick(() => {
      })
      done()
    })
  })

Finally, it was found that the correct router
was not added to the jest file:

import VueRouter from 'vue-router'

describe('groupManage', () => {
  const wrapper = mount(groupManage, {
    global: {
      plugins: [ElementPlus, VueRouter, store],  // Remember to add VueRouter
      mocks: {
        $route: {
          params: {
            image_uuid: '3'   // the data you may use in vue page
          }
        }
      }
    }
  })
})

Another: createlocalvue has been cancelled in the new Vue test utils

The date selector Report Null Error in element is cleared

Recently, a small bug was found when using the date selector in element. When I clear the selected date and click search again, the console will report an error, as shown in the following figure:

After troubleshooting, I found that this problem occurs because when we click clear, the value value bound by V-model will change from a value to a null, so the console will report an error. There are also many solutions, such as re assigning value before the next call; Or you can also listen to the value of the V-model, and then solve the problem through judgment. The method I use is to directly judge the value of the V-model, and then assign the value if it meets the conditions. The specific implementation code is as follows:

core code: 

//Event Methods
searchTabs() {
// parameters needed on the backend
let data = {
    sjlx: this.sjlx,
    pageNumber: this.pageSize,
    pageSize: this.pageNumber,
    zfry: this.road.enforce,
    jcjg: this.road.testing,
    sfcf: this.road.other,
    startTime: "",//start time
    endTime: "",//end time
}
// By determining the value of the v-model binding, it must be an Array value and must have two values
if (this.road.dateTime && Array.isArray(this.road.dateTime) && this.road.dateTime.length == 2) {
    // Assign the judged value to the startTime and endTime in data above
    data.startTime = new Date(this.road.dateTime[0]) // start time
    data.endTime = new Date(this.road.dateTime[1]) // end time
}
}

Full code:

html

 <div>
     <el-date-picker
             v-model="road.dateTime"
             type="datetimerange"
             start-placeholder="start-date"
             end-placeholder="end-date"
             :default-time="['12:00:00']"
             value-format="yyyy-MM-dd"
     >
     </el-date-picker>
 </div>

js

export default {
    data() {
        return {
        		pageNumber: 1, //Current page number
                pageSize: 10, //how many items are displayed on a page
          		//search criteria
                road: {
                    dateTime: "", //date
                    enforce: "", //Road enforcement officer
                    testing: "", //testing results
                    whether: "", //whether to penalize
                },
        }
    },
    methods:{
         	//Search
            searchTabs() {
                // parameters needed on the back end
                let data = {
                    sjlx: this.sjlx,
                    pageNumber: this.pageSize,
                    pageSize: this.pageNumber,
                    zfry: this.road.enforce,
                    jcjg: this.road.testing,
                    sfcf: this.road.other,
                    startTime: "",//start time
                    endTime: "",//end time
                }
                // By determining the value of the v-model binding, it must be an Array value and must have two values
                if (this.road.dateTime && Array.isArray(this.road.dateTime) && this.road.dateTime.length == 2) {
                    // Assign the judged value to the startTime and endTime in data above
                    data.startTime = new Date(this.road.dateTime[0]) // start time
                    data.endTime = new Date(this.road.dateTime[1]) // end time
                }
                // call the interface pass data to the backend
                search(data).then(res => {
                    // console.log(res, "search)....")
                    this.tableData = res.data.records
                    this.pageTotal = res.data.total
                })
            },
    }
}

So far, the problem has been solved.

[Solved] NPM err! Cannot read property ‘parent’ of null npm ERR! A complete log of this run can be found in: npm ERR!

Error reporting: NPM err! Cannot read property ‘parent’ of null npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Aren\AppData\Local\npm-cache_logs\2021-04-06T02_00_29_654z-debug.log
reason: in the project dependency package, the node-sass module requires node-gyp
and node-gyp; It also needs to rely on Python 2.7 and Microsoft’s VC + + build tools for compilation, but Windows operating system will not install Python 2.7 and VC + + build tools by default

Solution:
1. Use the administrator to open CMD

2. Install node-gyp
command

npm install -g node-gyp

3. Configure and install python2.7 and VC + + build tools
because node-gyp needs to rely on python2.7 and Microsoft’s VC + + build tools for compilation, but Windows operating system will not install python2.7 and VC + + build tools by default

Install python2.7 and VC + + build tools dependencies for node-gyp configuration:

npm install --global --production windows-build-tools

4. Check whether the installation is successful and restart NPM install

The Vue mobile terminal cannot use string.replaceall, and the error message is blank

When developing Vue, the replaceall function is used, and there is no problem debugging on the PC side

However, when packaging and deploying to the mobile end test, it is found that some pages are blank and the console only displays error {}

After troubleshooting, the replaceall function reports an error. Replace it with replace

Vue agent reports an Error 404 nginx configuration method

The error points are different and the solutions are different. Use them after understanding

Recently, I was working on a personal blog. There was a music box function that called the API of Netease cloud music.

Agent configured in Vue

There is no problem with the local NPM run serve

But after packing in nginx

The API of the agent will report 404

  terms of settlement:

Configuration in nginx.config

location /music/ {
        proxy_pass http://39.108.136.207:3000/;
        
	   }

  Pit point:

        proxy_ Pass cannot be placed directly on the IP + port

        Additional and/or corresponding methods are required

        

How to Solve React devtools plug-in Error

The developer debugging tool plug-in of react will prompt an error in chrome after installation:

react-refresh-runtime.development.js:465

Solution:

Under the react project (not the plug-in file directory), find \node_Modules\@pmmmwh\react refresh webpack plugin\client

Reactrrefreshentry.js file, comment out this line:

//RefreshRuntime.injectIntoGlobalHook(safeThis);

[Solved] Vue create error: ERROR: command failed: npm install –loglevel error

Vue create reports an error

Solution: https://stackoverflow.com/questions/53934852/vue-cli-3-command-failed-npm-install-loglevel-error

It should be noted that the article provides two main solutions:
1. NPM cache clean -- force or manually delete the NPM cache in the appdata folder
2.npm config set registry=" http://registry.npmjs.org/" after running this command, you can create your own project.

After I tried the first scheme unsuccessfully, I tried to combine the two schemes successfully, but I don’t know the specific principle. I hope someone with good intentions can help me solve what’s wrong

[Solved] IE Browser Error: unhandled promise rejection error: access is denied. File stream Download

There are many export files and download files in the project. The front end adopts the file stream download method, requests the back-end interface and returns the file stream
at first, it was not clear that the ordinary dynamic creation a tag method was not compatible with ie. later, the bug “unhandled promise rejection error: access denied” appeared in the test on ie. after seeing this problem, it was directly copied to Baidu, and then the result was that the promise method might be wrong. After changing all the promise methods, an error was reported, Later, I thought about whether the way to create a tag was not compatible with ie, and Baidu adopted the method of downloading file stream compatible with ie. sure enough, I got the following solution and recorded it.

IE browser has Microsoft’s own mssaveblob method. The download of a tag is not compatible with ie.

//Since the method is used in several places in the page, it is wrapped as a component
// Don't forget to set the responseType='blob' in the request header, the react project is already encapsulated in the request
export const exportSaveData = (data, filename) => {
    let blob = new Blob([data], { type: 'application/x-www-form-urlencoded' });
    let blobUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveBlob) { // determine if the method is available for Internet Explorer
        try {
            window.navigator.msSaveBlob(blob, filename)
        } catch (e) {
            console.log(e);
        }
    } else {
        // Google Chrome Create a tag Add download attribute to download
        const aElement = document.createElement('a'); // create a tag dynamically
        document.body.appendChild(aElement); // append the created a tag to the body
        aElement.style.display = 'none'; //you can set the a tag not to be visible
        aElement.href = blobUrl; a tag's href is the processed blob
        aElement.download = filename;
        aElement.click();
        document.body.removeChild(aElement);
        window.URL.revokeObjectURL(blobUrl); //release the blob object
    }
}

Perfectly solve the problem that IE cannot export

[Solved] VUE Error: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘$on‘)“

vue error:
vue.esm.js?a026:628 [Vue warn]: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘$on’)”

Solution: Add the following codes in main.js

// The event Bus is used for communication between unrelated components.
Vue.prototype.$bus = new Vue()

Weboffice Warning: OLE error 800A01A8 [How to Solve]

Solution:

This problem can be solved by reinstalling office
precautions:
1. Install the full version of office
2. After the installation of office is completed, create a new document and open it. If you open the document for the first time, you will be prompted whether to use the recommended settings. Select Yes or no, because in the process of WebOffice calling office, if a pop-up window appears in office, the call will fail.