정적 파일이 없는 vue 스캐폴딩 생성 프로젝트에 어떤 문제가 있나요?

프론트 엔드 기술의 지속적인 개발로 인해 점점 더 많은 프론트 엔드 프레임워크가 일상적인 개발에 도입되고 있습니다. 이러한 프레임워크 중에서 Vue.js는 빠르고 가벼운 프런트엔드 프레임워크로 개발자들에게 점점 더 선호되고 있습니다. Vue.js를 개발하는 동안 우리는 일반적으로 공식 스캐폴딩인 Vue CLI를 사용하여 프로젝트를 만듭니다. 그러나 어떤 경우에는 Vue CLI를 사용하여 프로젝트를 생성할 때 정적 폴더가 생성되지 않는 것을 발견하여 초보 개발자에게 혼란을 줄 수 있습니다. 이 문서에서는 일반적으로 발생하는 이 문제를 해결하는 방법을 안내합니다.

먼저 왜 이런 일이 발생하는지 이해해 봅시다. Vue CLI를 통해 새 프로젝트를 생성하면 Vue CLI는 일부 기본 구성과 구조를 프로젝트의 기본 파일로 초기화합니다. 이러한 파일은 프로젝트 루트 디렉터리의 src 폴더에 포함되어 있습니다. 기본적으로 Vue CLI는 정적 파일이 포함된 폴더를 생성하지 않습니다. 따라서 CSS 또는 JavaScript 파일과 같은 정적 폴더 리소스에 액세스하려고 하면 일반적으로 404 오류 페이지가 표시됩니다.

그렇다면 Vue CLI로 생성된 프로젝트에 정적 폴더를 추가하는 방법은 무엇일까요? 아래에는 두 가지 방법이 소개되어 있습니다.

방법 1: 정적 폴더를 수동으로 생성

먼저 프로젝트의 루트 디렉터리에 static이라는 폴더를 수동으로 생성해야 합니다. 이 폴더는 정적 리소스 파일을 저장하는 데 사용됩니다. 정적 폴더 아래에 일부 하위 폴더를 만들어 다양한 유형의 정적 리소스를 저장할 수 있습니다. 예를 들어 CSS 폴더를 만들고 모든 CSS 파일을 여기에 저장할 수 있습니다. 또한 모든 이미지 리소스를 저장하는 이미지 폴더를 만들 수도 있습니다.

Vue CLI에게 정적 폴더를 생성했음을 알리려면 루트 디렉터리에서 vue.config.js라는 파일을 찾아서 열어야 합니다. 파일이 없으면 수동으로 생성해야 합니다. vue.config.js 파일에 다음 코드를 추가합니다.

module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].from = 'static'
        return args
      })
  }
}

이 코드는 Vue CLI에게 프로젝트를 빌드할 때 정적 폴더의 모든 내용을 프로젝트의 루트 디렉터리에 복사하도록 지시합니다. 이제 정적 리소스 파일을 static 폴더에 넣고 Vue.js 프로젝트에서 정상적으로 사용할 수 있습니다.

방법 2: 공용 폴더 사용

Vue CLI는 프로젝트에 정적 파일을 추가하는 또 다른 방법도 제공합니다. 이 방법은 정적 파일을 공용 폴더에 저장하는 것입니다. public 폴더는 src 폴더와 다르며 최종 프로젝트에 컴파일 및 패키징되지 않습니다. 대신 최종 빌드된 프로젝트 루트 디렉터리에 복사됩니다.

이 방법을 사용하려면 정적 리소스 파일을 공용 폴더에 넣고 다음과 같이 HTML 파일에서 사용하면 됩니다.

<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">

Vue CLI 3에서는 정적 파일을 다음 위치에 저장해야 합니다. 공용 폴더이므로 vue.config.js 파일에서 어떤 구성도 수행할 필요가 없습니다.

요약

Vue.js 개발 과정에서 우리는 주로 공식 스캐폴딩인 Vue CLI를 사용하여 프로젝트를 만듭니다. Vue CLI를 사용하여 프로젝트를 생성한 후 정적 폴더가 생성되지 않은 경우 수동으로 정적 폴더를 생성하거나 공용 폴더를 사용하여 정적 파일을 추가할 수 있습니다. Vue.js를 배우고 있는 초보 개발자라면 이 글이 도움이 될 것이라고 믿습니다.

위 내용은 정적 파일이 없는 vue 스캐폴딩 생성 프로젝트에 어떤 문제가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!