Tag Archives: View.js

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

Vue Use scss Error: this.getOptions is not a function [How to Solve]

Background: an error is reported when installing sass for NPM

Installing sass through NPM

npm install node-sass
npm intall sass-loader

The above command installs the latest version. The reason for the error is that the latest version causes getoptions() incompatibility. The solution is to uninstall sass loader node sass and install the lower version. The commands are as follows

npm uninstall sass-loader //uninstall
npm install [email protected]  //install 8.0
npm uninstall --save node-sass
npm install [email protected]

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

How to Solve Props value transfer International Language error

Props value transfer – International Language – error reporting problem

The calling component finds that the label is dead. Because it wants to be lazy, it plans to transfer the value of the label to the value assignment through props.

  props: {
    labelName: {
      type: String,
      default: this.$t('common_rpt_department')
    }
  },`

If you write directly at the beginning, an error is reported on the page

solution:

  props: {
    labelName: {
      type: String,
      default () {
        return this.$t('common_rpt_department')
      }
    }
  },

Done!

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

        

[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] 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()

[Solved] Vue item packaging error: Failed to load resource: the server responded with a status of 404 (Not Found)

After NPM run build is executed, a dist folder will be generated, index.html will be opened, and an error will be reported on the console

As shown in the figure below:

This is because the correct path cannot be found, resulting in an error.

Solution:

1. In the root directory, create a new vue.config.js file. Of course, if any, ignore this item;

2. In vue.config.js, change publicpath: “/” to   Publicpath: “. /”, then repackage and NPM run build.

publicPath: “/”          =====>>>>>>>>       publicPath: “./”

For the location of writing, you can refer to the following code:

module.exports = {
  devServer: {
    port: 8080,
    open: true
  },
  lintOnSave: false,
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "static",//Set the directory where the static resources (js, css, img, fonts) generated by the package will be placed.
  indexPath: 'index.html'//Used to set the storage location of the index.html file generated by the package
}

Vue-echarts error: was not found in vue-demi [How to Solve]

Was not found in Vue Demi

version problem. Vue-echarts6.0.0 is vue3. When it is introduced into vue2, an alarm will appear
you can go back to version 4.0.2

npm install [email protected] -S

Vue-echarts4.0.2 corresponds to echarts4, so echats also returns the version

npm install [email protected] -S

Prompt personal version record

"dependencies": {
    "core-js": "^3.6.5",
    "echarts": "^4.9.0",
    "vue": "^2.6.11",
    "vue-echarts": "^4.0.2"
  },

Introduce in main.js

import ECharts from 'vue-echarts'
// import * as echarts from 'echarts' //Global introduction
// Vue.prototype.$echats = echarts;
import 'echarts/lib/chart/line' // On-demand introduction
Vue.component('chart', ECharts)

[Solved] Vuepress Package Error: document is not defined

Write a description document for the component library, but an error is reported when packaging and deployment: the document is not defined. You can only find out the reason after checking the data, because vuepress is rendered through the node.js server when packaging, and an error is reported because there is no document object in node.js. The final solution is as follows:. Vuepress/enhanceapp.js folder

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//The way it was introduced before - will cause an error to be reported
// import CommonUI from 'vue-common-ui'
import 'vue-common-ui/lib/vue-common-ui.css'
export default async ({ Vue }) => {
  if (typeof process === 'undefined') {
    Vue.use(ElementUI) 
    // Solve the problem of introducing your own components with the error document not found
    Vue.mixin({
      mounted() {
        import('vue-common-ui').then(function(m) {
          Vue.use(m.default)
        })
      }
    })
  }
}

After modifying the introduction method of Vue common UI components, the online address of the component library is normally packaged

[Solved] Uncaught (in promise) Error: Avoided redundant navigation to current location:

Add the following code to the routing file   router/index.js

//Solve the problem that vue-router in the navigation bar of ElementUI reports an error when repeatedly clicking the menu in version 3.0 or above
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

Good position!!!!!

Type