vue+webpack 执行npm run dev后访问首页显示目录结构的原因

vue+webpack 执行npm run dev后访问首页时，显示的是目录结构

如下图

这是因为缺少了两个plugin配置项
添加代码如下（必须提前安装html-webpack-plugin插件）

const HTMLPlugin = require('html-webpack-plugin')
//引入html-webpack-plugin
const webpack = require("webpack")//引入webpack
const defaultPlugins=[
        new webpack.DefinePlugin({//主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env,
            'process.env':{//二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin()//引入HTMLPlugin    
    ]

找到plugins:[],将其修改为如下：
将defaultPlugins追加到plugins里边

 plugins:defaultPlugins.concat([
            new ExtractPlugin('styles.[contentHash:8].css'),//定义打包分离出的css文件名
            new webpack.optimize.CommonsChunkPlugin({//定义静态文件打包
                name: 'vendor'
            }),
            new webpack.optimize.CommonsChunkPlugin({//将app.js文件中一些关于webpack文件的配置单独打包出为一个文件,用于解决部分浏览器长缓存问题   
                name: 'runtime'
            })
        ])

然后再次运行npm run dev 就可以看到首页了