가져오기 경로 내부의 @는 무엇을 의미하나?

가져오기 경로 내부의 @는 무엇을 의미하나?

나는 새로운 vue.js 프로젝트를 시작하고 있어서 vue-cli 도구를 사용하여 새로운 웹 팩 프로젝트를 준비했다.vue init webpack).

생성된 파일을 살펴보다가 다음과 같은 가져오기가 눈에 띄었다.src/router/index.js파일:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

at 표지판을 본 적이 없다.@) 전에 어떤 경로에.나는 그것이 상대적인 경로를 허용한다고 의심한다(아마도?) 하지만 나는 그것이 진정으로 무엇을 하는지 확실히 알고 싶었다.

온라인으로 검색해 보았지만 설명(prob는 "at sign"을 검색하거나 문자 문자를 사용하기 때문에 찾을 수 없었다.@검색 기준으로는 도움이 되지 않는다.)

는 무엇인가?@이 경로에서 실행(문서화 링크가 환상적일 것임)하고 이것이 es6인가?웹팩 같은 거?부로더 같은 거?

갱신하다

펠릭스 클링이 나에게 이 같은 질문에 대한 또 다른 중복 스택 오버플로 질문/답변을 알려줘서 고마워.

다른 스택 오버플로우 포스트에 대한 코멘트가 이 질문에 대한 정확한 답은 아니지만(나의 경우 Babel 플러그인이 아니었다) 그것이 무엇인지 찾는 정확한 방향을 내게 알려주었다.

Vue-cli가 크랭킹하는 비계에서는 기본 웹 팩 구성의 일부가 .vue 파일에 대한 별칭을 설정한다.

이는 src 파일에서 상대적인 경로를 제공한다는 점과 해당 파일의 요구사항을 없앤다는 점에서 모두 타당하다..vue(일반적으로 필요한) 가져오기 경로의 끝 부분에

도와줘서 고마워!

이것은 WebPack 구성 옵션으로 수행되며 Vue에만 국한되지 않는다.

Vue Webpack 템플릿에서 Webpack이 대체되도록 구성됨@/경로:

  const path = require('path');

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': path.resolve('src'),
    }
  },
  ...

별칭은 다음과 같이 사용된다.

import '@/<path inside src folder>';

tsconfig에서도 변수를 생성할 수 있다는 점도 염두에 두십시오.

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

이는 명명 규칙 목적에 활용할 수 있다.

import { componentHeader } from '@components/header';

나는 다음과 같은 조합으로 끝냈다.

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE는 uri에 대한 경고를 중지하지만, 이로 인해 "build\webpack.base.conf.js"에서 컴파일할 때 uri가 유효하지 않게 된다.

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': resolve('src'),
  }
},

빙구!

resolutionsrc') 나를 위한 일은 없고 path.path.propertiessrc')는 효과가 있다.

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

웹 팩을 추가해 보십시오. mix.webpackConfig 참조 래러벨 혼합.

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

그리고 vue 사용으로.

<img src="@imgSrc/logo.png" />

뭔가 변한 게 틀림없어.여기에 주어진 답은 더 이상 정확하지 않다.09장의 이 프로젝트는 가져오기 문에서 @ 기호를 사용하지만 webpack.config.js 파일에 경로 결정문이 없다.

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

참조URL: https://stackoverflow.com/questions/42749973/what-does-the-mean-inside-an-import-path