求助！Vue项目用Webpack打包后放到服务器上，但访问是空白页？弄了好久了也不知道什么原因
发布于 1 个月前 作者 lxz612 1211 次浏览 来自 问答

我最近弄了个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

12 回复

莫沉……

来自酷炫的 CNodeMD

莫沉……

来自酷炫的 CNodeMD

最好把更多的代码放出来，或者把项目地址贴出来，只看webpack的配置不容易看出来

@soullcm 这是我的项目地址 https://github.com/lxz612/Gank 我自己在调试环境webpack-dev-server没有问题，就是打包后放到服务器就跪掉了。我觉得是自己配置写的有问题，但又不知问题在哪。真的好气人呀！

有可能是 js环境的问题 我有个vue项目 在chrome扩展的环境下(csp)就是你这种情况 后来换成了cooking脚手架生成的,能用了

@lxz612 我下下来试了，我放在express上，可以运行啊，你直接访问index.html，估计不行，因为你里面定义的路由会识别不出来，你定义一个404的路由，应该就能看出问题了

@cnbailian (⊙_⊙)，那我换这个脚手架试下。谢谢了……

来自酷炫的 CNodeMD

@soullcm 我也试过你这个方法，确实能行。但这打包出来是静态资源，我觉得应该可以访问index.html。我的项目结构和别人的也是用vue-cli构建的项目基本一致，用相同的步骤打包他们的项目，放到我本机的Apache服务器，确实可以访问index.html，也能识别他们的vue路由。但打包我的就是会有问题。

来自酷炫的 CNodeMD

1

@lxz612 楼主，我试了下。挂在服务器的根目录下可以运行，但是挂在服务器的子目录下就不行。你如果要修改的话，得把 src/router.js 的路径加上前缀， 比如说你访问 vue 项目的路径是 localhost:3000/gank， 得把 ‘/’ 改成 ‘/gank’，’/index’ 改成 ‘/gank/index’。另外， webpack.config.js 里的 ouput 里的 publicPath 也得改，类似前面说的.

node-test

@IchiNiNiIchi 确实如你所说，问题是路由上。我开始一直以为服务器端路由和vue前端路由是一一对应的，后面认真思考后，才发现两者只是在入口路由上是一致。我现在已经弄好了，而且已经把项目部署到Github Pages上。虽然依旧还是有些其他问题，但我已经有点明白怎么做了。感激之情，无以言表。另外也非常感谢@cnbailian @soullcm 这两位大哥的相助。

此贴终结！

回到顶部