Tag Archives: vue

[Solved] Vue Template Error: You may have an infinite update loop in a component render function,vue

The reason for my error report is:

I used sort to sort the values defined in data. Data detected changes and re rendered the template, resulting in repeated circular rendering, which gave me a warning (which also led to abnormal paging rendering)

{{ scope.row.jobs.sort((a,   b)=>   new   Date(a.createdAt)  –  new   Date(b.createdAt))[0].createdAt   }}

Solution:

Sort works on itself, so I made a deep copy in sort.

{{   JSON.parse(JSON.stringify(scope.row.jobs)).sort((a,   b)=>   new   Date(a.createdAt)  –  new   Date(b.createdAt))[0].createdAt   }}

Error message of element and Vue framework

The above error prompt error in render function: “typeerror: cannot read property ‘$options’ of undefined” is because I show the code here:
& lt; El form item label = “picture configuration” required & gt& lt;/ el=form-item> The picture configuration here cannot be written separately with the BTN tag of element

 

Vue jumps to this page and reports an error

A button is bound to a method. The method is to jump to a route address. When the trigger method has been clicked to the route, click the button again. The console will report an error and will not affect the project operation

 

  Solution:

if(this.$route.path  == ‘/ bindingmodifica/newpassword’){

             return  ”

}else{

             this.$router.push(‘/bindingmodifica/newpassword’)

}

 

Judge whether the route is changed, and jump when it is not

Vue item reports error webpackjsonp is not defined

In Vue single page applications, we will probably use the plug-in Commons chunkplugin. Portal   CommonsChunkPlugin  

However, after the project passes the local test, there is no problem, but an error will be reported after it is packaged and put online   webpackJsonp is not defined。 This is because the public file must be referenced before the JS file it references

You can manually change the file reference, but the following solutions are recommended:  

Find build → webpack.prod.conf.js → find the htmlwebpackplugin plug-in, and add the following configuration

chunks: ['manifest', 'vendor', 'app']

Summary of 5 error reports encountered during Vue installation

 

preface

this blog post will not teach you how to install Vue, but will tell you five problems you may encounter during the installation process

In 2017, I wrote a blog about installing Vue. Details: https://www.cnblogs.com/tu-0718/p/7521099.html

 

 

5 error reports

①: if you use Vue – V to query whether to install Vue, you may not have installed Vue cli scaffold (Vue cli can quickly create Vue projects)

              

 

        ② : Vue an error occurs when installing Taobao image, indicating that the configuration is invalid. It must be a complete and legal HTTP address because I added 1 space in front of URL , there should be no space here

         Note: after installing Taobao image, you can use cnpm to replace NPM , but it is recommended to install modules and plug-ins with cnpm , and package and start Vue with NPM

(cnpm is a domestic image, and NPM servers are abroad. Fixed cnpm is installed faster, but it may not be updated in time, resulting in some unexpected problems)

            

 

          ③: if you directly use NPM run dev   An error will be reported when the command is run, indicating that there is no such file or directory. You need to create a project first

            

              Use Vue init webpack Vue_test(vue_Test creates a project for the project name, and then selects it as needed

        If there is no (Y/N) option for you to choose whether to install, just press enter directly, y is installation, and n is not installation

             

 

        ④: if you enter the project directory and enter NPM run dev , you will be prompted that the project is not found, indicating that your project path is wrong. Check whether the project path and input command are correct  

          Here is the error in the entry of the project path. Directly copy and paste the path to git bash (equivalent to CMD windows )   The path slash will become ‘\’ , which should actually be ‘/’

      

note: copying an item path in git bash cannot be pasted directly Ctrl + V , just click the mouse wheel

 

⑤: Enter NPM install when installing dependent packages, if there is a prompt in the following figure

Reviewed 11959 packages and found 12 vulnerabilities ( 7 medium, 5 high risk). Run ` NPM audit fix ‘to repair them

Or run ` NPM audit ` to get detailed information. Here, you can directly enter NPM audit fix for repair

          

            Then, the following figure will appear to inform you that some of these vulnerabilities have been fixed, and you need to enter NPM audit fix — force for further repair

            

            Then see the following prompt and enter NPM audit

            

             Finally, when you see the figure below, it shows that you have completely fixed the vulnerability

            

           note: refer to

 

supplement:

①: Run NPM run dev   Automatically open browser settings after (manual opening by default)

           config index. JS , and then find  autoOpenBrowser: false,   Change false to true

       ② : if you want to stop starting Vue , you don’t want to repeat the following 3 steps every time

           CD “project path”

            npm install

            npm run dev

              you can directly Ctrl + C as shown in the following figure. Select y according to the prompt. At this time, you only need to enter NPM once   Run dev

        

 

[Solved] Vue installation Babel dependency error

Just deleted the dependent package for some reasons and reinstalled it. The result is an error

deprecate babel-preset-es2015@* ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

After checking, it turns out that Babel preset es2015 has been started and abandoned. Now Babel preset env is the latest one. Just reinstall it

npm install babel-preset-env --save

 

How to Solve Eslint syntax error in Vue project

“And” in the project; Errors are often reported. It’s really tangled. Today I see a solution that can be deleted without uninstallation

In the project root directory, create a new. Pretierrc file to remove semicolons and replace with single quotes

{
   "semi": false,
   "singleQuote": true
}

In this way, the format will not change to “”

You can also disable the syntax rules and modify the. Eslintrc.js file to disable the error items

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ?'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ?'error' : 'off',
    'space-before-function-paren': 0 //Disable this rule
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

 

Vue compatible ie error reporting solution

Ie page blank

Error message

  The page is blank

Error reporting reason

Babel only converts new JavaScript syntax (such as arrow functions) by default, rather than new APIs, such as iterator, generator, set, maps, proxy, reflect, symbol, promise and other new objects or methods

For example, promise, new native methods such as string. Padstart (left pad), etc. To solve this problem, we use a technology called Polyfill

In short, the compatibility problem is that ie does not support the syntax of some new objects and expressions in ES6. The solution is to use Babel Polyfill to use ES6 normally

What is Polyfill

For example, some old browsers do not support the number.isnan method. Polyfill can be as follows:

if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}

Polyfill solves the API compatibility problem in a similar way

Solution

1. Using Babel Polyfill

Introducing Babel Polyfill  

npm i -S babel-polyfill

How to use

It needs to be introduced at the top of your application’s entry point or in the packaging configuration

Introduce in main.js

import 'babel-polyfill'

Or modify the configuration in webpack.base.conf.js in config

entry:{
    app:['babel-polyfill','./src/main.js']      
}

2. Add the following code to index.html (not required)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3. Module transcoding specified in Babel loader

Whether poly fill is added or an error is reported. Generally, third-party UI frameworks, libraries and plug-ins are used, and the underlying syntax of these UI frameworks, libraries and plug-ins is ES6

Locate the Babel loader in webpack.base.conf.js

For example, I use element UI and v-charts here   Amend to read as follows:

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/v-charts/src'),
          resolve('node_modules/vue-awesome'),
          resolve('node_modules/element-ui/packages'),
          resolve('node_modules/element-ui/src')
        ]
}

4. Packaging problem

If there is a webpack code packaging error, generally go to GitHub webpack issues  

This error is due to the webpack dev server version problem

5. Babel configuration. Babelrc file

. babelrc is the configuration file of Babel, which is placed in the root directory of the project. Generally, the. Babelrc file does not need to be modified. If you do all the above and still report an error, you can view the official website document to configure the file

 

In the code generated by the project using Vue cli, there is a. Babelrc file in the root directory. In the default generated template content, add “usebuiltins”: “entry”  , This is a setting that specifies which content needs to be Polyfill (compatible).
usebuiltins there are three settings

False – do nothing

Entry – according to the support of the browser version, the Polyfill requirements are split and imported, and only Polyfill that is not supported by the browser is imported

Usage – check the usage of ES6/7/8 in the code, and only load the Polyfill used in the code

{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "entry"
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

See Babel’s official website for details: https://www.babeljs.cn/

Summary

1. Projects written in Vue can be compatible with IE9 and above at most

2. Use   babel-polyfill

3. Specify the UI framework, library and plug-in path of the third party to be transcoded in Babel loader

4. Configure. Babelrc file

5. Babel is a powerful thing   https://www.babeljs.cn/

Error message encountered in new Vue project

an error will be reported during NPM install . After accessing the data on the Internet, the solutions are as follows:

0. Upgrade NPM version first: NPM install – G NPM     It is possible that the NPM version is too low and an error is reported

1. Then clean up the cache:  npm cache clean –force   there may be previous legacy code that will have an impact, so clean up the cache first

2. Re execution  npm config set registry http://registry.cnpmjs.org

3. Re execution  npm install

Or directly:

0. Upgrade NPM version first: NPM install – G NPM   It is possible that the NPM version is too low and an error is reported

1. Then clean up the cache:  npm cache clean –force   There may be previous legacy code that will have an impact, so clean up the cache first

2. Execute the command directly: NPM install   — registry= https://registry.npm.taobao.org –loglevel=silly:

Through the above steps, the problem of error reporting during NPM install is perfectly solved

If you still report an error, you can clear the cache NPM cache clean — force several times   I cleaned it up three times and solved it perfectly

 

Another problem is:

when NPM run dev is executed after the Vue project is created correctly, the home page of the new project cannot be opened automatically.

The solution is as follows:

Find the index.js file in the config folder under the root directory

‘use strict’
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require(‘path’)

module.exports = {
dev: {

// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {},

//variable dev server settings
host: ‘localhost’,// can be overwritten by process.env.host
port: 8080,// can be overwritten by process.env.port, if port is in use, a free one will be determined
autoopenbrowser: false,// whether to open the browser by default. The default is false. Change it to true.
errorowlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver -watchoptions-

// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,

/**
* Source Maps
*/

 

 

below is my official account. You can pay close attention to it. You can learn together and make progress together: