Question

我正在尝试使用ngrok在手机上测试我的vue + django项目，但它不起作用（它只显示白屏）。 vue部分是使用webpack（v2，而不是最新的vue cli 3）提供的。

有趣的是，当我从计算机（或另一位同事的计算机）访问我的vue项目时，ngrok可以工作-只是不能在手机上工作。 http日志显示200响应，只是它在手机上显示白屏。另外，访问其他无提示页面也可以，因此这可能是一个webpack问题。

我尝试将disableHostCheck设置为true，但是它仍然不起作用，并且我不确定还有其他操作。

webpack.config.js

const path = require('path')
const webpack = require('webpack')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const BundleTracker = require('webpack-bundle-tracker')
const WriteFilePlugin = require('write-file-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'http://localhost:8080/dist/',
    filename: 'build.js'
  },
  plugins: [
    new BundleTracker({
      filename: 'webpack-stats.json'
    }),
    new WriteFilePlugin(),
    new VueLoaderPlugin()
  ],
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    // security risk to set to true, but need to turn it on for ngrok to work
    disableHostCheck: true,
    host: '0.0.0.0',
    hot: true,
  },
}

settings.py（django）

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': os.path.join(str(BASE_DIR), 'frontend', 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
    }
}

在移动设备上访问ngrok时，Vue项目（django + webpack）显示白屏

0 个答案: