分类
前端

laravel-mix配置vue的懒加载

注:laravel 5.8版本

路由懒加载

修改之前的路由为懒加载模式,其他不需要变动:

const Example = require('./components/Example.vue')
//改为
const Example = ()=>()=>import('./components/Example.vue')

webpack.mix.js

更新 webpack 配置,使其支持把组件按组分块打包:

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.extract(['vue', 'vue-router', 'axios']) //不需要频繁更新组件提取到vendor.js
.version() //开启版本号,对应mix-manifest.json;
.webpackConfig({
output: {
publicPath:process.env.APP_URL+'/', //项目为二级目录,这个很有用
filename:'[name].js', //可选
chunkFilename: 'js/chunk/[name].js?id=[chunkhash:20]' //按组件打包文件,启用分包异步加载功能
}
})

当项目为二级目录时,建议加上 publicPath:process.env.APP_URL+'/' 配置

mix-manifest.json

当 mix 开启了版本号,mix-manifest.json 中映射的打包文件都会加上 ?id=d41d8cd98f00b204e980 的版本号:

{
"/js/chunk//js/app.js": "/js/chunk//js/app.js?id=deee26a25babd60a2fea",
"/css/app.css": "/css/app.css?id=d41d8cd98f00b204e980",
"/js/manifest.js": "/js/manifest.js?id=bba2d32dc208463ea21b",
"/js/chunk//js/vendor.js": "/js/chunk//js/vendor.js?id=dc84a611552605e8467c"
}

此时就可以使用 mix 函数加载文件,而不用关系版本号:

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

后记,但第一次执行 npm run watch-pollnpm run production 出现报错:

vendor.js?id=dc7aa51b14b938f60dc6:2260 [vue-router] Failed to resolve async component default: TypeError: Cannot read property 'call' of undefined
vendor.js?id=dc7aa51b14b938f60dc6:2260 [vue-router] uncaught error during route navigation:
vendor.js?id=dc7aa51b14b938f60dc6:4323 TypeError: Cannot read property 'call' of undefined
     at webpack_require (manifest.js?id=0b8d8ed69518def5b3d0:85)
     at Object../node_modules/_css-loader@1.0.1@css-loader/index.js?!./node_modules/_vue-loader@15.7.1@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js?!./node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js?!./resources/js/components/Slider.vue?vue&type=style&index=0&id=872262e8&scoped=true&lang=css& (0.js:292)
     at webpack_require (manifest.js?id=0b8d8ed69518def5b3d0:85)
     at Object../node_modules/_style-loader@0.23.1@style-loader/index.js!./node_modules/_css-loader@1.0.1@css-loader/index.js?!./node_modules/_vue-loader@15.7.1@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js?!./node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js?!./resources/js/components/Slider.vue?vue&type=style&index=0&id=872262e8&scoped=true&lang=css& (0.js:342)
     at webpack_require (manifest.js?id=0b8d8ed69518def5b3d0:85)
     at Module../resources/js/components/Slider.vue?vue&type=style&index=0&id=872262e8&scoped=true&lang=css& (0.js:1361)
     at webpack_require (manifest.js?id=0b8d8ed69518def5b3d0:85)
     at Module../resources/js/components/Slider.vue (0.js:1310)
     at webpack_require (manifest.js?id=0b8d8ed69518def5b3d0:85)
     at Module../node_modules/_babel-loader@8.0.6@babel-loader/lib/index.js?!./node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js?!./resources/js/pages/home/Index.vue?vue&type=script&lang=js& (22.js:16)

经过搜索和测试,是 sass('resources/sass/app.scss', 'public/css')导致的,所以在没有使用到 sass 的话,这句话可以注释掉,就不会报错了。具体原因参考:https://blog.csdn.net/u011584949/article/details/89177515

由JsxKu

爱生活,爱技术

发表评论

电子邮件地址不会被公开。 必填项已用*标注