鍍金池/ 問答/HTML/ vue-router懶加載配置之后,頁面變?yōu)榭瞻醉撁妫蠼鉀Q,求指導(dǎo)

vue-router懶加載配置之后,頁面變?yōu)榭瞻醉撁?,求解決,求指導(dǎo)

vue-router懶加載配置之后,頁面變?yōu)榭瞻醉?br>沒有配置懶加載的時候不會有這個問題,
配置懶加載的時候

/*const product = resolve => {
    require.ensure(['./pages/product.vue'], () => {
        console.log("entering");
        resolve()
    })
}*/
// const product= resolve=> {require(['./pages/product.vue'], resolve)};

const product= ()=>import('./pages/product');

不配置懶加載

import product from './pages/product.vue'

使用的時候

 {
        path:'/product',
        component:product,
        name:'歡迎頁面',
        hidden: true,
    },

我的webpack配置

entry: {
        app: path.join(__dirname, 'src/app.js'),
        vendor: ['vue', 'vue-router', 'font-awesome-loader'],
        elementUI: ['element-ui'],
        echarts: ['echarts']
    },
    output: {
        filename: 'js/[name].[chunkhash].js',
        chunkFilename: "js/[name].[chunkhash].js",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.min.js'
        },
        extensions: ['.js', '.vue', '.css', '.scss']
    },

求解決求指導(dǎo) 有償采納
可以看到已經(jīng)生成的chunk文件 但是內(nèi)容沒有渲染出來 ,也沒有進入到引入進來的視圖里面去
圖片描述

補充一下我的webpack完整配置 ,沒有采用官方的cli

const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
var CompressionPlugin = require('compression-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const webpackConfig = {
    entry: {
        app: path.join(__dirname, 'src/app.js'),
        vendor: ['vue', 'vue-router', 'font-awesome-loader'],
        elementUI: ['element-ui'],
        echarts: ['echarts']
    },
    output: {
        filename: 'js/[name].[chunkhash].js',
        chunkFilename: "js/[name].[chunkhash].js",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.min.js'
        },
        extensions: ['.js', '.vue', '.css', '.scss']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.(scss|sass|css)$/,
                use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader'
                }))
            },
            {
                test: /\.woff2?(\?=[0-9]\.[0-9]\.[0-9])?$/,
                use: 'url-loader'
            },
            {
                test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: './font-awesome/[name].[ext]'
                    }
                }
            },
            {
                test: /\.(png|jpg|jpeg|svg|gif|GIF|PNG|SVG|JPEG|JPG)/,
                exclude: /node_modules/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100,
                        name: './images/[name]-[hash:8].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new htmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'index.html',
            title: 'FOPHome',
            favicon: path.join(__dirname, 'src/images/FOPlogo.png'),
            inject: true
        }),
        new ExtractTextPlugin('[name].[contenthash].css'),
        new cleanWebpackPlugin('dist'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module, count) {
                //  下邊return參考的vue-cli配置
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'runtime'
        })
    ]
};
if (isDev) {
    webpackConfig.output.filename = '[name].[hash].js';
    webpackConfig.devtool = '#cheap-module-eval-source-map';
    webpackConfig.devServer = {
        port: 8999,
        host: '0.0.0.0' /*'0.0.0.0'*/,// '0.0.0.0'可以通過127.0.0.1或者localhost來訪問 也可以通過本機的ip來進行訪問,在手機等移動設(shè)備進行調(diào)試。
        overlay: {
            errors: true,
        },
        open: true,
        hot: true,
        proxy: {
          
        }
    };
    webpackConfig.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
} else {
    webpackConfig.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            comments: false,        //去掉注釋
            compress: {
                warnings: false    //忽略警告,要不然會有一大堆的黃色字體出現(xiàn)……
            }
        })),
        webpackConfig.plugins.push(
            new CompressionPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    ['js', 'css'].join('|') +
                    ')$'
                ),
                threshold: 10240,
                minRatio: 0.8
            })
        )
}
module.exports = webpackConfig;
回答
編輯回答
拽很帥

build/webpack.prod.conf.js
中 注釋掉這個
new webpack.optimize.ModuleConcatenationPlugin()
插件
試一下看看行不行

2017年1月15日 21:02
編輯回答
愛是癌
const product= resolve=> require(['./pages/product.vue'], resolve);
2018年5月8日 03:28