Webpack을 사용하여 vue.js 프로젝트에서 at ( '@') 로그인 경로를 사용하여 ES6 가져 오기

Webpack을 사용하여 vue.js 프로젝트에서 at ( '@') 로그인 경로를 사용하여 ES6 가져 오기

---

새 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 일?

최신 정보

이 동일한 질문에 대한 다른 중복 스택 오버 플로우 질문 / 답변을 알려 주신 Felix Kling에게 감사드립니다.

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

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

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

도와 주셔서 감사합니다!

---

This is done with Webpack resolve.alias configuration option and isn't specific to Vue.

In Vue Webpack template, Webpack is configured to replace @/ with src path:

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

---

Also keep in mind you can create variables in tsconfig as well:

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

This can be utilized for naming convention purposes:

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

---

I get over with following combination

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

IDE will stop warning the uri, but this causes invalid uri when compile, in "build\webpack.base.conf.js"

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

Bingoo!

---

resolve('src') no works for me but path.resolve('src') works

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

참고URL : https://stackoverflow.com/questions/42749973/es6-import-using-at-sign-in-path-in-a-vue-js-project-using-webpack