Vue Lazy加载不起作用
Vue Lazy加载不起作用
提问于 2018-08-10 22:38:41
在我的项目中添加了几个Vue组件后，我的webpack捆绑包最终变得很大，所以我尝试使用基于本教程的延迟加载：
https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/
但是，我一直收到以下错误：
[Vue warn]: Failed to resolve async component: function(){return n.e(0).then(n.bind(null,155)).then(function(t){return t.default})}
Reason: Error: Loading chunk 0 failed.这是我的webpack.config.js
/**
* Webpack configuration for development
*/
const path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');
var inProduction = (process.env.NODE_ENV === 'production');
require("babel-polyfill");
module.exports = {
devtool: 'source-map',
entry: ["babel-polyfill", path.join(process.cwd(), 'src/index')],
output: {
filename: 'bundle.js',
path: path.join(process.cwd(), 'public', 'assets'),
publicPath: 'js/',
chunkFilename: 'chunks/[name].js',
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js?$/,
use: [
{
loader: "babel-loader",
options: {
"presets": [["es2015", {"modules": false}]]
}
}
],
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
],
},
target: 'web',
//externals: [nodeExternals()],
};下面是初始化Vue的index.js文件：
import Vue from 'vue';
Vue.component('latest-articles', () => import('./javascripts/components/LatestArticles.vue').then(m => m.default));
const app = new Vue({
el: '#app',
components: {
'latest-articles': () => import('./javascripts/components/LatestArticles.vue').then(m => m.default)
}
});我想知道我错过了什么。任何帮助都将不胜感激！
回答 1
Stack Overflow用户
发布于 2018-08-11 01:46:43
我不确定你的webpack和vue.js版本。尝试像下面这样在index.js中编辑代码，看看控制台中是否有任何错误。
import Vue from 'vue';
const LatestArticles = () =>import('./javascripts/components/LatestArticles.vue');
const app = new Vue({
el: '#app',
components: {
'latest-articles': LatestArticles
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51794820
复制相关文章
相似问题
腾讯云开发者
