Vue.js 지연로드

Question

내 vue.js 구성 요소를 컴파일하기 위해 Laravel mix를 사용하고 있습니다. 이 여기 지금 나는 게으른로드 내 구성 요소 싶습니다

https://vuejs.org/v2/guide/components.html#Async-Components

나는이 때 :

Vue.component('setting',() => import('./components/settings/setting.vue')); 

내가 얻을 :

error in ./resources/assets/admin/vue/core.js 

Syntax Error: Unexpected token (36:31) 

    34 | */ 
    35 | 
> 36 | Vue.component('setting',() => import('./components/settings/setting.vue')); 
    |        ^

은 여기에서 잘못 될 수 있을까? '정상'구성 요소를 등록하면 모든 것이 작동합니까?

Answer 1

의견에 이어. publicPath를 지정해야합니다. 다음 laravel 믹스와 laravel 5.5에서 테스트 작업 webpack.mix.js 파일의 작은 버전입니다

당신은 아마 당신의 manifest.json을 잘못 경로와 생산했다

const { mix } = require('laravel-mix'); 
mix.setPublicPath('public/'); 



mix.webpackConfig({ 
    output: { 
     chunkFilename: 'js/[name].[chunkhash].js', 
     publicPath: '/' 
    }, 
    module: { 
     rules: [{ 
      test: /\.js?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      options: { 
       presets: ['babel-preset-env'], 
       plugins:['babel-plugin-dynamic-import-webpack'] 
      } 
     }, 

    ] 
    } 
}); 


mix.js('resources/assets/js/app.js', 'public/js') 
.sass('resources/assets/sass/app.scss', 'public/css') 
.version(); 

따라서 웹팩은 찾을 수 없다는됩니다 올바른 청크 파일 경로. 따라서 솔루션은 경로를 수정하거나 위의 예와 같이 기본 경로로 고정하는 것입니다. 위의 코드는 청크 파일뿐만 아니라 public/js 내에 app.js를 생성해야합니다. 또한 그것은 결국 당신의 블레이드의 동적 수입 플러그인이 처음이다 설치 바벨 로더와 바벨이 필요

<script src="{{mix('/js/app.js')}}"></script>

참고하여 app.js 파일을 참조 이제 공용 디렉토리 에서의 manifest.json를 생성합니다 webpack에서 바벨 플러그인을 사용할 수 있어야합니다. laravel mix에서 .babelrc 파일을 읽었는지 잘 모르겠다면 충분합니다.