Parlons des raisons et des solutions pour lesquelles le projet vue ne peut pas reconnaître les fichiers js natifs

Avec le développement continu de la technologie front-end, de plus en plus de développeurs commencent à utiliser Vue pour créer des applications Web. Vue est un très excellent framework JavaScript, mais lors de l'utilisation de Vue, vous pouvez rencontrer certains problèmes, comme le fait que le projet Vue ne soit pas capable de reconnaître les fichiers JavaScript natifs. Cet article décrira les causes et les solutions à ce problème.

1. Description du problème

Dans les projets Vue, nous devons généralement introduire des fichiers JavaScript pour implémenter des fonctions spécifiques. Mais parfois, nous constatons que le projet Vue ne peut pas reconnaître ces fichiers JavaScript natifs, ce qui nous empêche d'utiliser les fonctions ou les variables de ces fichiers. Voici un exemple précis.

Nous avons un fichier JavaScript nommé utils.js avec le contenu suivant :

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

A ce moment, nous introduisons ce fichier dans le composant Vue :

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

Mais lorsque nous appelons la fonction showMessage, nous recevons un " showMessage n'est pas erreur définie" :

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

Uncaught ReferenceError: showMessage is not defined

Cette erreur nous indique que le projet Vue ne reconnaît pas la fonction showMessage dans le fichier. Alors, comment ce problème est-il survenu ?

2. Cause du problème

Le projet Vue ne peut pas reconnaître les fichiers JavaScript natifs car Vue utilise l'outil d'empaquetage Webpack, et Webpack ne peut empaqueter et reconnaître que des types de fichiers spécifiques par défaut, tels que .vue, .js, .css, etc. En d'autres termes, si nous introduisons directement un fichier JavaScript natif dans le projet Vue, Webpack ne pourra pas analyser le fichier correctement.

3. Solutions

Maintenant que nous connaissons la cause du problème, présentons quelques solutions.

1. Emballer des fichiers JavaScript natifs

Pour utiliser des fichiers JavaScript natifs dans les projets Vue, nous devons les empaqueter dans un format pouvant être reconnu par Webpack. Webpack prend en charge l'utilisation de divers chargeurs pour empaqueter et identifier différents types de fichiers. Pour les fichiers JavaScript natifs, nous pouvons utiliser babel-loader pour l'empaquetage et la conversion.

Les étapes sont les suivantes :

1) Installez babel-loader et babel-core

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

2) Ajoutez le code suivant dans le fichier de configuration Webpack :

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

3) Introduisez les fichiers packagés dans le composant Vue

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

2. Écrivez directement le code js dans le fichier .vue

Si vous ne souhaitez pas utiliser babel-loader pour l'empaquetage et la conversion, vous pouvez également écrire le code JavaScript directement dans le composant Vue :

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

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

Cette méthode est plus simple et adapté aux petits projets ou aux besoins moins exigeants Situation complexe.

4. Résumé

Cet article présente principalement le problème et les solutions au problème selon lequel le projet Vue ne peut pas reconnaître les fichiers JavaScript natifs. Si vous rencontrez des problèmes similaires, vous pouvez essayer d'utiliser babel-loader pour la conversion d'empaquetage ou intégrer le code directement dans le composant Vue. J'espère que cet article pourra vous être utile, merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!