vue 프로젝트가 기본 js 파일을 인식하지 못하는 이유와 해결 방법에 대해 이야기해 보겠습니다.

프런트 엔드 기술의 지속적인 개발로 인해 점점 더 많은 개발자가 Vue를 사용하여 웹 애플리케이션을 구축하기 시작했습니다. Vue는 매우 뛰어난 JavaScript 프레임워크이지만 Vue를 사용할 때 Vue 프로젝트가 기본 JavaScript 파일을 인식하지 못하는 등 몇 가지 문제에 직면할 수 있습니다. 이 문서에서는 이 문제의 원인과 해결 방법을 설명합니다.

1. 문제 설명

Vue 프로젝트에서는 일반적으로 특정 기능을 구현하기 위해 일부 JavaScript 파일을 도입해야 합니다. 그러나 때로는 Vue 프로젝트가 이러한 기본 JavaScript 파일을 인식하지 못해 해당 파일의 함수나 변수를 사용할 수 없는 경우가 있습니다. 여기에 구체적인 예가 있습니다.

다음 내용을 포함하는 utils.js라는 JavaScript 파일이 있습니다.

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

이번에는 Vue 구성 요소에 이 파일을 소개합니다.

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

그러나 showMessage 함수를 호출하면 " showMessage가 아닙니다. 정의됨” 오류:

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

Uncaught ReferenceError: showMessage is not defined

이 오류는 Vue 프로젝트가 파일의 showMessage 함수를 인식하지 못함을 나타냅니다. 그렇다면 이 문제는 어떻게 발생했는가?

2. 문제 원인

Vue는 Webpack 패키징 도구를 사용하기 때문에 Vue 프로젝트는 기본 JavaScript 파일을 인식할 수 없으며 Webpack은 기본적으로 .vue, .js, .css, 등. 즉, Vue 프로젝트에 기본 JavaScript 파일을 직접 도입하면 Webpack이 파일을 올바르게 구문 분석할 수 없습니다.

3. 솔루션

이제 문제의 원인을 알았으니 몇 가지 해결 방법을 소개하겠습니다.

1. 네이티브 JavaScript 파일 패키징

Vue 프로젝트에서 네이티브 JavaScript 파일을 사용하려면 Webpack에서 인식할 수 있는 형식으로 패키징해야 합니다. Webpack은 다양한 로더를 사용하여 다양한 파일 유형을 패키징하고 식별하는 것을 지원합니다. 기본 JavaScript 파일의 경우 패키징 및 변환을 위해 babel-loader를 사용할 수 있습니다.

단계는 다음과 같습니다.

1) babel-loader 및 babel-core 설치

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

2) Webpack 구성 파일에 다음 코드를 추가합니다.

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

3) 패키지된 파일을 Vue 구성 요소에 추가합니다

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

2. js 코드를 .vue 파일에 직접 작성

패키징 및 변환에 babel-loader를 사용하지 않으려면 Vue 구성 요소에서 직접 JavaScript 코드를 작성할 수도 있습니다.

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

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

이 방법은 다음과 같습니다. 소규모 프로젝트나 덜 까다로운 요구 사항에 더 간단하고 적합합니다. 복잡한 상황.

4. 요약

이 글에서는 주로 Vue 프로젝트가 네이티브 JavaScript 파일을 인식하지 못하는 문제와 해결 방법을 소개합니다. 비슷한 문제가 발생하면 babel-loader를 사용하여 패키징 변환을 시도하거나 코드를 Vue 구성 요소에 직접 포함할 수 있습니다. 이 글이 여러분에게 도움이 되기를 바랍니다. 읽어주셔서 감사합니다!

위 내용은 vue 프로젝트가 기본 js 파일을 인식하지 못하는 이유와 해결 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!