새 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 기호 ( )를 보지 못했습니다 . 상대 경로 (아마도?)를 허용한다고 생각하지만 그것이 실제로 무엇을하는지 확신하고 싶었습니다.

온라인으로 검색을 시도했지만 설명을 찾을 수 없었습니다 ( "부호"를 검색하거나 리터럴 문자를 사용하는 @것이 검색 기준으로 도움이되지 않기 때문에).

@이 경로에서 무엇을 합니까 (문서 링크는 환상적입니다) 이것이 es6입니까? 웹팩 일? vue-loader 일?

최신 정보

이 동일한 질문에 대한 다른 중복 stackoverflow 질문 / 답변을 알려 주신 Felix Kling에게 감사드립니다.

다른 stackoverflow 게시물에 대한 의견은이 질문에 대한 정확한 답변이 아니지만 (내 경우에는 바벨 플러그인이 아니 었습니다) 올바른 방향으로 나에게 무엇이 있는지 찾아 냈습니다.

vue-cli가 제공하는 스캐 폴딩에서 기본 웹팩 구성의 일부는 .vue 파일의 별칭을 설정합니다.

이 차종은 당신의 src 파일에서 상대 경로를 제공한다는 사실에 모두를 감지 하고 그것의 요구 사항 제거 .vue(일반적 필요) 수입 경로의 끝을.

도와 주셔서 감사합니다!

이것은 Webpack resolve.alias구성 옵션으로 수행되며 Vue에만 국한되지 않습니다.

Vue Webpack 템플릿 에서 Webpack은 경로 로 대체 @/되도록 구성되어 있습니다 .src

  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'),
  }
},

빙구!

resolve ( 'src') 는 나를 위해 작동하지 않지만 path.resolve ( 'src')는 작동합니다

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

아마도 webpack을 추가해보십시오. mix.webpackConfig는 laravel mix를 참조 합니다 .

mix.webpackConfig({

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

그리고 나서 사용합니다.

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