laravel-mix配置vue的懒加载组件

2024年1月8日 326次阅读 来源: 烤鸡翅膀我最爱吃

larave-mix version: v4.1.2

安装依赖

yarn add babel-plugin-syntax-dynamic-import --save-dev
yarn add  babel-plugin-dynamic-import-webpack --save-dev

.baberc

增加:

    "plugins": [
        ["syntax-dynamic-import"]
    ]

webpack.config.js

注意
publicPath: public/dist
chunk js file path: public/dist/js/xxx.chunk.js
chunk js url in html : http:localhost/dist/js/xxxx.c…

mix.setPublicPath(path.join('public', 'dist'));
mix.config.webpackConfig.output = {
  chunkFilename: 'js/[name].chunk.js',
  publicPath: '/dist/',
};

引入组件改为:

//Vue.component('post-content-vue', require('../components/PostContent'));

PostContent = ()=>import(/* webpackChunkName: "post-content" */'../components/PostContent');
Vue.component('post-content-vue', PostContent);

Enjoy.

    原文作者：烤鸡翅膀我最爱吃
    原文地址: https://segmentfault.com/a/1190000020123664
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞