What to do if there is an error when starting the project in Vue strict mode

Recently, some developers who use Vue.js to develop projects have discovered that some strange errors will appear when starting the project in strict mode. These error reports caused the project to fail to start, causing great trouble to developers. This article explains what causes this error and how to fix it.

First of all, we need to understand what the strict mode of Vue.js is. The strict mode in Vue.js is mainly used for debugging and error prompts during the development process. It performs additional checks on the code during the compilation process to ensure the standardization and correctness of the code. Therefore, enabling strict mode during development can catch bugs faster and speed up the process of code fixes.

However, sometimes enabling strict mode can cause some problems. For example, in a new project created using the Vue-cli tool, if the vue.config.js file is added and strict mode is added in it (as shown below), an error will occur:

// vue.config.js
module.exports = {
  lintOnSave: true,
  runtimeCompiler: true, 
  // 启用严格模式会导致项目无法启动
  strictMode: true
}

while trying When starting the project, the following error message will appear:

Error: Avoid app logic that relies on enumerating keys on a component instance. 
The keys will be empty in production mode to avoid performance overhead.

This is because in strict mode in Vue.js, the key value of the component instance will be empty, which results in an error when using the key value during the development process. question.

So, how to solve this problem? The following are two solutions:

Method 1:

Turn off strict mode and set the strictMode attribute to false in vue.config.js

// vue.config.js
module.exports = {
  lintOnSave: true,
  runtimeCompiler: true,
  strictMode: false // 关闭严格模式
}

Method Two:

Create a new vue.config.prod.js file in the project root directory, and turn off the strict mode check in it, as shown below:

// vue.config.prod.js
module.exports = {
  lintOnSave: true,
  runtimeCompiler: true,
  // 打包时不启动严格模式
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false
      })
    ],
  }
}

Strict mode can be solved through the above two methods Mode problems that occur when starting the project, so that the project can start smoothly. Although strict mode can help us find problems faster, in some cases it can also become the source of the problem. This requires developers to have an in-depth understanding of the Vue.js framework in order to better solve problems.

In short, for Vue.js developers, enabling strict mode can improve the standardization and correctness of the code, while speeding up the resolution of code errors. However, strict mode may also cause some problems. In actual development, we need to choose whether to enable strict mode based on the specific needs of the project.

The above is the detailed content of What to do if there is an error when starting the project in Vue strict mode. For more information, please follow other related articles on the PHP Chinese website!