웹 팩이 있는 VueJS: 수출입이 예상대로 작동하지 않음

웹 팩이 있는 VueJS: 수출입이 예상대로 작동하지 않음

새로운 Vuetify / Webpack 프로젝트를 시작했으며, 구현을 시도했다.vue-router을 통해 프로젝트를 설정한 후vue init vuetify/webpack.

나는 이 튜토리얼의 지침에 따라 라우터를 설정했다.몇 번 만지작거리다가 부에 부품을 수입하는 방법을 바꿔서 작동하게 했다.

나의router/index.js파일:

// works for me
import Main from '../components/Main.vue'

// does NOT work; from the tutorial
import Main from '@/components/Main'

내 질문은, 왜 내가 내 물건을 가져와야 하는가이다.Main.vue비교적 서류철에 기입하다..vue extension수입으로?

---

내 프로젝트 구조:

-node_modules/
-public/
-src/
|-components/
||-Main.vue
|-router/
||-index.js
|-App.vue
|main.js
-index.html
-package.json
-webpack.config.js

내 webpack.config.js 파일:

var path = require('path')
var webpack = require('webpack')
 
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    alias: {
      'public': path.resolve(__dirname, './public')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          objectAssign: 'Object.assign'
        }
      },
      {
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

이름이 지정된 별칭 디렉터리에서 파일을 로드하려고 하는 경우@웹 팩 구성 파일에서 해당 별칭을 정의하지 않으셨습니다.

또한 다음을 지정해야 한다..vue다음에서 해결 가능한 항목에 추가하지 않았기 때문에 확장resolve구성 개체의 속성.

당신 안에webpack.config.js파일, 확인할 확장명 목록 및 별칭 추가@어떤 지도를 당신의 것으로 만드는지src디렉토리:

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

---

편집: @evetterdrake가 사용 시 이 사실을 알려줌vue-cli뷔에티파이(Vuetify)와 프로젝트를 시작하다resolve구성 속성이 다음 위치에 있음module일반적인 웹 팩 프로젝트를 설정할 때와는 다른 속성.

이러한 구성 옵션을 기존 구성에 추가하십시오.resolve그렇지 않으면 덮어쓰고 무시될 것이다.

참조URL: https://stackoverflow.com/questions/44163578/vuejs-with-webpack-imports-and-exports-not-working-as-expected