我最近弄了个Vue小项目。原本想的是Webpack打包后把dist文件夹和index.html放到本机的Apache服务器上跑，但放到服务器根目录后，访问发现加载不了。但是我感到奇怪的是访问的index.html明明可以加载打包后js文件（第一张图），为什么会什么都没有呢？请各位仁兄帮帮忙!跪谢！
下面是配置文件和index.html
~webpack.config.js配置文件
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var isProduction = function() {
return process.env.NODE_ENV === 'production';
}
//webpack插件
var plugins = [
//提公用js到common.js文件中
new webpack.optimize.CommonsChunkPlugin('common.js'),
//将样式统一发布到style.css中
new ExtractTextPlugin("style.css", {
allChunks: true,
disable: false
}),
// 使用 ProvidePlugin 加载使用率高的依赖库
new webpack.ProvidePlugin({
$: 'webpack-zepto'
})
];
var entry ='./src/main',
cdnPrefix = "",
buildPath = "/dist/",
publishPath = cdnPrefix + buildPath;
//生产环境js压缩和图片cdn
if (isProduction()) {
cdnPrefix = "";
publishPath = cdnPrefix;
}
module.exports = {
debug: true,
entry: entry, //入口文件
output: { //输出配置
path: __dirname + buildPath, //生成文件的存储路径
filename: 'build.js', //生成的文件名
publicPath: publishPath
},
//配置loader
module: {
loaders: [
{//处理.vue文件
test: /\.vue$/,
loader: 'vue-loader'
},
{//处理.js文件
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{//处理文件中各种图片资源
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.json$/,
loader: 'json'
},
{
test:/\.(html|tpl)$/,
loader: 'html-loader'
}
]
},
vue:{
loaders: {
css: ExtractTextPlugin.extract("css")
}
},
babel: {
//es6转码为es5
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extension: ['', '.js'],
},
plugins:plugins,
devtool: '#source-map'
}
~index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Gank</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<style type="text/css">
body,img{
padding:0;
margin:0;
}
body{
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
</style>
<link rel="stylesheet" type="text/css" href="/dist/style.css">
</head>
<body>
<div id="app">
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view ></router-view>
</div>
<script src="/dist/common.js"></script>
<script src="/dist/build.js"></script>
<script src="/dist/1.build.js"></script>
<script src="/dist/2.build.js"></script>
<script src="/dist/3.build.js"></script>
</body>
</html>
这是我的项目目录