Vue2.0 hash模式路由加载页面，页面显示空白，但html却被渲染！

[weixin_38049216]

vue2.0 路由开启默认的hash模式后，页面加载出来的是空白什么也没有！但是谷歌浏览器审查元素却发现app节点下有页面的数据！具体错误看下面图片： 2222.png1114×612 120 KB 正确的也就是开启 mode: history 却可以显示页面，下面这是正确显示的实际效果图： 3232.png579×891 112 KB 现在的问题是为什么：hash模式为什么会导致这种情况，如何解决？谢谢各位了！！！ 下面是配置文件信息： main.js 代码如下： const routes = [ { path: '/', component: home }, { path: '/home', component: home }, { path: '/class', component: shopclassify }, { path: '/cart', component: shopcart }, { path: '/setting', component: mysetting } ] const router = new VueRouter({ routes }) const app = new Vue({ router: router, render: h => h(App) }).$mount('#app') webpack.config.js配置 var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { loaders: [ //编译vue组件 { test: /\.vue$/, loader: 'vue-loader', options: { // vue-loader options go here } }, { test: /vux.src.*?js$/, loader: 'babel' }, //编译js文件 { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'] }, //编译css文件 { test: /\.css$/, loader: 'style-loader!css-loader' }, // LESS { test: /\.less$/, loader: 'style!css?importLoaders=2!less' }, // SASS { test: /\.scss$/, loader: 'style-loader!css!sass' }, //编译字体文件 { test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/, loader: 'file-loader?name=[hash].[ext]' }, //编译图片文件 { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]', } } ] }, resolve: { alias: { vue: 'vue/dist/vue.js' } }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) } package.json 文件 { "name": "shopimg", "description": "test", "author": "2271608011 <[e-mail]>", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "mint-ui": "^2.0.5", "vue": "^2.1.0", "vue-resource": "^1.0.3", "vue-router": "^2.0.3" }, "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.0.0", "babel-loader": "^6.2.8", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "compression": "^1.6.2", "connect-history-api-fallback": "^1.3.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "express": "^4.14.0", "file-loader": "^0.9.0", "http-proxy-middleware": "^0.17.2", "jsx-loader": "^0.13.2", "less": "^2.7.1", "less-loader": "^2.2.3", "opn": "^4.0.2", "sass": "^0.5.0", "sass-loader": "^4.0.2", "serve-index": "^1.8.0", "sockjs": "^0.3.18", "spdy": "^3.4.4", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vue-loader": "^10.0.0", "vue-template-compiler": "^2.1.0", "webpack": "^2.1.0-beta.25", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^2.1.0-beta.0" } }