새 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(일반적 필요) 수입 경로의 끝을.

도와 주셔서 감사합니다!

답변

  const path = require('path');

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

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

"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'

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

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

mix.webpackConfig({

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

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