Let's talk about the reasons and solutions why the vue project cannot recognize native js files

With the continuous development of front-end technology, more and more developers are beginning to use Vue to build web applications. Vue is a very excellent JavaScript framework, but when using Vue, you may encounter some problems, such as the Vue project not being able to recognize native JavaScript files. This article will describe the causes and solutions to this problem.

1. Problem description

In Vue projects, we usually need to introduce some JavaScript files to implement specific functions. But sometimes, we find that the Vue project cannot recognize these native JavaScript files, resulting in us being unable to use the functions or variables in these files. Here is a specific example.

We have a JavaScript file named utils.js with the following content:

function showMessage() {
  alert('Hello World!')
}

At this time, we introduce this file in the Vue component:

<script src="./utils.js"></script>

But When we called the showMessage function, we received a "showMessage is not defined" error:

<button @click="showMessage()">点击按钮</button>

Uncaught ReferenceError: showMessage is not defined

This error tells us that the Vue project cannot recognize the showMessage function in the file. So, how did this problem arise?

2. Cause of the problem

The Vue project cannot recognize native JavaScript files because Vue uses the Webpack packaging tool, and Webpack can only package and recognize specific file types by default, such as .vue, .js, .css, etc. In other words, if we directly introduce a native JavaScript file into the Vue project, Webpack will not be able to parse the file correctly.

3. Solutions

Now that we know the cause of the problem, let’s introduce some solutions.

1. Package native JavaScript files

To use native JavaScript files in a Vue project, we need to package them into a format that can be recognized by Webpack. Webpack supports using various loaders to package and identify different file types. For native JavaScript files, we can use babel-loader for packaging and conversion.

The steps are as follows:

1) Install babel-loader and babel-core

npm install babel-loader babel-core --save-dev

2) Add the following code to the Webpack configuration file:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

3) Introduce the packaged file into the Vue component

import showMessage from 'path/to/bundled/utils.js'

2. Directly write the js code into the .vue file

If you do not want to use babel-loader for packaging conversion, You can also write JavaScript code directly in the Vue component:

<template>
  <div>
    <button @click="showMessage()">点击按钮</button>
  </div>
</template>

<script>
  export default {
    methods: {
      showMessage(){
        alert('Hello World!')
      }
    }
  }
</script>

This method is simpler and suitable for small projects or situations where the requirements are not very complex.

4. Summary

This article mainly introduces the problem and solutions to the problem that the Vue project cannot recognize native JavaScript files. If you encounter similar problems, you can try using babel-loader for packaging conversion, or embed the code directly into the Vue component. I hope this article can be helpful to you, thank you for reading!

The above is the detailed content of Let's talk about the reasons and solutions why the vue project cannot recognize native js files. For more information, please follow other related articles on the PHP Chinese website!