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


273

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

도와 주셔서 감사합니다!



1
@FelixKling 그것은 전체 질문에 대답하지 않기 때문에 정확한 사본이 아닙니다. 이것은 es6입니까? 웹팩 일? vue-loader 일?
Estus Flask

네, 그 질문은 비슷하지만 중복되지는 않았다고 생각합니다. 어쨌든 나는 그것이 어디에서 왔는지 알아 내고 대답으로 추가 할 수 없으므로 설명으로 질문을 업데이트했습니다.
Chris Schmitz

@ estus : 대답은 ES6의 일부가 아니라 웹 팩 구성의 일부라는 것을 분명히합니다. 생각하지 않습니까? 그리고 여기에서도 정확히 그렇습니다. 구성의 본질이 약간 다릅니다.
Felix Kling

@FelixKling 나는 estus가 아직 업데이트를 추가하지 않은 것이 어떤 종류인지에 대한 질문이 있다고 지적했을 때 (업데이트를 입력 할 때 그의 의견이 나오는 것을 보았습니다). 모든 준비가 완료되었으며 특정 인스턴스에 대한 자세한 설명이 있으므로 계속 진행할 수 있습니다. 고마워
Chris Schmitz

답변:


243

이것은 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>';

171
JavaScript는 더 이상 JavaScript가 아닙니다. Babel / webpack은이 Frankenstein 언어를 제공하며, 새로운 개발자는 ECMAScript 사양이 끝나고 userland 플러그인 / 변환이 시작되는 위치를 알고 있어야합니다. 정말 슬프다, imo.
감사합니다.

3
@naomik 이러한 트릭을 설정에 도입할지 여부는 사용자에게 달려 있습니다. 어쨌든 사용자 정의 .vue 파일 형식에 의존하기 때문에 Vue에는 큰 문제가되지 않습니다.
Estus Flask

15
개인적으로 원하는 경우 유연성을 추가 할 수 있다고 생각합니다. 나는 그것을 프랑켄슈타인보다 덜 볼보 트론처럼 본다. 더 큰 로봇을 만들기 위해 사자로 물건을 만들거나 다른 사자를 결합 할 수 있습니다. 예, 때로는 이와 같은 질문이 있지만 답변을 찾을 수없는 것은 아닙니다. 실제로, 규모에 관계없이 모든 프로젝트에서 프랑켄슈타인 또는 볼트론보기를 취할 수 있습니다. 단지 "종속성 사용 및 이해"일뿐입니다.
Chris Schmitz

1
@ChrisSchmitz 컨텍스트와 관점에 따라 다릅니다. 이와 같은 작업을 수행하면 프로젝트가 Webpack을 사용하도록 제한됩니다. 프로젝트가 도착할 때 기본 ES6 모듈을 사용하려는 경우 또는 CommonJS를 모듈에 사용할 수있는 노드 인 경우 좋지 않을 수 있습니다. 반면에 상대 경로가 길면 유지 관리 및 리팩토링하기가 더 어려울 수 있습니다.
Estus Flask

3
vue-cliv3 +를 사용할 때는 폴더 ~@를 참조 해야 src합니다. 예 :$font-path: '~@/assets/fonts/';
Consta Gorgan

9

또한 tsconfig에서도 변수를 작성할 수 있습니다.

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

이는 명명 규칙 목적으로 사용될 수 있습니다.

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

그러나 이러한 종류의 별칭은 소스 JS에 그대로 남아 있으며 런타임에 별칭을 작동시키기 위해 래퍼를 삽입해야합니다. 어쩌면이 TS 구문이 빌드 시간에 변환되도록 babel을 통해 방법이 있습니까? Typescript 's tsc를 사용하는 것은 아니므로 module-alias또는 과 같은 것이 필요합니다 tsconfig-paths.

3

나는 다음 조합으로 극복

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

빙구!


1

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

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

1

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

mix.webpackConfig({

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

그리고 나서 사용합니다.

<img src="@imgSrc/logo.png" />
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.