nuxt를 사용하여 로컬 JS 파일을 로드하는 방법

nuxt를 사용하여 로컬 JS 파일을 로드하는 방법

/assets/js 폴더에 여러 개의 스크립트가 있습니다.다음과 같이 nuxt.config.js에 추가했습니다.

script: [
  { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' },
  { src: '~assets/js/bootstrap.min.js' },
  { src: '~assets/js/retina-1.1.0.js' },
  { src: '~assets/js/jquery.hoverdir.js' },
  { src: '~assets/js/jquery.hoverex.min.js' },
  { src: '~assets/js/jquery.prettyPhoto.js' },
  { src: '~assets/js/jquery.isotope.min.js' },
  { src: '~assets/js/custom.js' }
],

첫 번째 파일에는 문제가 없지만 로컬 파일은 로드되지 않습니다.'@/assets', '/assets', 'js/', '~/assets' 등을 시도했지만 작동하지 않습니다.

항상 다음 오류가 발생합니다.

GET http://localhost:3000/~assets/js/custom.js net::ERR_ABORTED

그럼 파일을 어떻게 로드하면 될까요?감사합니다.

자산 디렉토리의 루트에 JS 파일을 넣습니다.그렇지 않으면 정적 디렉토리를 생성해야 합니다.이게 도움이 됐으면 좋겠어요.

고객님의 고객명nuxt.config.js

head: {
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
    }],
    script: [
        {
            type: 'text/javascript',
            src: 'js/jquery.min.js',
            body: true
        },
        {
            type: 'text/javascript',
            src: 'js/script.js',
            body: true
        }
    ]
}

js 파일은 정적 경로 폴더에 있어야 하며 이 코드를 *.vue 파일에 추가하여 사용해야 합니다.

export default {
    head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "/assets/css/style.css"
        },
      ],

      script: [
        {
          src: "assets/js/style.js",
          body: true
        },],}
      }

<template>
  <img src="~/assets/your_image.png" />
</template>

또는

background: url('~assets/banner.svg');

또는

<img :src="require(`~/assets/img/${image}.jpg`)" />

https://nuxtjs.org/docs/2.x/directory-structure/assets/

주의:

CSS 파일에서 ~/ 별칭이 올바르게 해결되지 않습니다.URL CSS 참조에는 ~assets (슬래시 없음)를 사용해야 합니다.예를 들어, background: url("~assets/banner.svg")

언급URL : https://stackoverflow.com/questions/47342479/how-to-load-local-js-file-with-nuxt