[英]Vue.js lazy loading
我正在使用 Laravel mix 来编译我的 vue.js 组件。 现在我想延迟加载我在这里找到的组件:
https://v2.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'));
| ^
这里有什么问题? 当我注册组件“正常”时,一切正常吗?
根据评论。 您需要指定公共路径。 这是在 laravel 5.5 上使用 laravel-mix 测试的工作 webpack.mix.js 文件的小版本
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();
您可能让 manifest.json 产生了错误的路径,因此 webpack 无法找到正确的块文件路径。 因此,您的解决方案是修改路径或仅使用默认路径,如上例所示。 上面的代码应该在 public/js 中生成 app.js 以及分块文件。 它还将在公共目录中生成 manifest.json 现在最后只需在刀片中引用您的 app.js 文件
<script src="{{mix('/js/app.js')}}"></script>
请注意,您需要安装 babel loader 和 babel 动态导入插件,首先需要能够在 webpack 中使用 babel 插件,因为我不确定 laravel mix 是否读取 .babelrc 文件,如果可以,那应该足够了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.