我最近弄了个Vue小项目。原本想的是Webpack打包后把dist文件夹和index.html放到本机的Apache服务器上跑,但放到服务器根目录后,访问发现加载不了。但是我感到奇怪的是访问的index.html明明可以加载打包后js文件(第一张图),为什么会什么都没有呢?请各位仁兄帮帮忙!跪谢! 捕获.JPG 下面是配置文件和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>
这是我的项目目录 捕获.JPG
@soullcm 这是我的项目地址 https://github.com/lxz612/Gank 我自己在调试环境webpack-dev-server没有问题,就是打包后放到服务器就跪掉了。我觉得是自己配置写的有问题,但又不知问题在哪。真的好气人呀!
@lxz612 我下下来试了,我放在express上,可以运行啊,你直接访问index.html,估计不行,因为你里面定义的路由会识别不出来,你定义一个404的路由,应该就能看出问题了
@lxz612 楼主,我试了下。挂在服务器的根目录下可以运行,但是挂在服务器的子目录下就不行。你如果要修改的话,得把 src/router.js 的路径加上前缀, 比如说你访问 vue 项目的路径是 localhost:3000/gank, 得把 ‘/’ 改成 ‘/gank’,’/index’ 改成 ‘/gank/index’。另外, webpack.config.js 里的 ouput 里的 publicPath 也得改,类似前面说的.
@IchiNiNiIchi 确实如你所说,问题是路由上。我开始一直以为服务器端路由和vue前端路由是一一对应的,后面认真思考后,才发现两者只是在入口路由上是一致。我现在已经弄好了,而且已经把项目部署到Github Pages上。虽然依旧还是有些其他问题,但我已经有点明白怎么做了。感激之情,无以言表。另外也非常感谢@cnbailian @soullcm 这两位大哥的相助。
@hezhongfeng 我看了下https://router.vuejs.org/zh-cn/essentials/history-mode.html然后把那段代码发给了后端,结果后端死活配不出来现在还在找解决方案...