Mari kita bincangkan tentang sebab dan penyelesaian mengapa projek vue tidak dapat mengenali fail js asli

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin ramai pembangun mula menggunakan Vue untuk membina aplikasi web. Vue ialah rangka kerja JavaScript yang sangat baik, tetapi apabila menggunakan Vue, anda mungkin menghadapi beberapa masalah, seperti projek Vue tidak dapat mengecam fail JavaScript asli. Artikel ini akan menerangkan punca dan penyelesaian kepada masalah ini.

1. Penerangan Masalah

Dalam projek Vue, kami biasanya perlu memperkenalkan beberapa fail JavaScript untuk melaksanakan fungsi tertentu. Tetapi kadangkala, kami mendapati bahawa projek Vue tidak dapat mengenali fail JavaScript asli ini, menyebabkan kami tidak dapat menggunakan fungsi atau pembolehubah dalam fail ini. Berikut adalah contoh khusus.

Kami mempunyai fail JavaScript bernama utils.js dengan kandungan berikut:

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

Pada ketika ini, kami memperkenalkan fail ini dalam komponen Vue:

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

Tetapi apabila kami memanggil fungsi showMessage, kami menerima ralat "showMessage is not definition":

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

Uncaught ReferenceError: showMessage is not defined

Ralat ini memberitahu kami bahawa projek Vue tidak dapat mengecam fungsi showMessage dalam fail. Jadi, bagaimana masalah ini timbul?

2. Punca masalah

Projek Vue tidak dapat mengenali fail JavaScript asli kerana Vue menggunakan alat pembungkusan Webpack dan Webpack hanya boleh membungkus dan mengecam jenis fail tertentu secara lalai, seperti . vue, .js, .css, dsb. Dalam erti kata lain, jika kami terus memperkenalkan fail JavaScript asli ke dalam projek Vue, Webpack tidak akan dapat menghuraikan fail dengan betul.

3. Penyelesaian

Sekarang kita tahu punca masalah, mari perkenalkan beberapa penyelesaian.

1. Membungkus fail JavaScript asli

Untuk menggunakan fail JavaScript asli dalam projek Vue, kami perlu membungkusnya ke dalam format yang boleh dikenali oleh Webpack. Webpack menyokong menggunakan pelbagai pemuat untuk membungkus dan mengenal pasti jenis fail yang berbeza Untuk fail JavaScript asli, kami boleh menggunakan pemuat babel untuk pembungkusan dan penukaran.

Langkah-langkahnya adalah seperti berikut:

1) Pasang babel-loader dan babel-core

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

2) Tambah kod berikut dalam fail konfigurasi Webpack:

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

3) Perkenalkan fail berpakej ke dalam komponen Vue

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

2. Terus tulis kod js ke dalam fail .vue

Jika anda tidak mahu menggunakan babel -loader untuk penukaran pembungkusan, anda juga boleh menulis kod JavaScript terus dalam komponen Vue:

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

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

Kaedah ini lebih mudah dan sesuai untuk projek kecil atau situasi di mana keperluannya tidak sangat kompleks.

4. Ringkasan

Artikel ini terutamanya memperkenalkan masalah dan penyelesaian kepada masalah yang projek Vue tidak dapat mengenali fail JavaScript asli. Jika anda menghadapi masalah yang sama, anda boleh cuba menggunakan pemuat babel untuk penukaran pembungkusan, atau benamkan kod terus ke dalam komponen Vue. Saya harap artikel ini dapat membantu anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Mari kita bincangkan tentang sebab dan penyelesaian mengapa projek vue tidak dapat mengenali fail js asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!