Question

我已经用生产版本构建了vue cli，并将其放在本地的nginx Web服务器上。问题是当我重新加载/report/product-report之类的网址时。有时网页仅呈现空白页面。

仅当我使用splitchunks时才应用此条件。控制台日志也很清楚，没有显示错误消息。

这是我的 nginx配置

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # this is commented
        # try_files $uri $uri/ =404;

        # this is for spa
        try_files $uri $uri/ /index.html;
    }
}

这是我的vue配置

module.exports = {
  assetsDir: "assets",
  chainWebpack: (config) => {
    config.optimization.occurrenceOrder(true);

    config.plugin("define").tap((definitions) => {
      definitions[0] = Object.assign(definitions[0], {
        "process.env.RESOURCE": JSON.stringify(resource)
      });

      return definitions;
    });

    config.plugin("html").tap((definitions) => {
      definitions[0].template = path.resolve("src", "main.html");
      definitions[0].SNAP_JS_URL = resource.SNAP_JS_URL;
      definitions[0].SNAP_CLIENT_KEY = resource.SNAP_CLIENT_KEY;

      return definitions;
    });
  },
  configureWebpack: {
    resolve: {
      alias: {"typescript-ioc": "typescript-ioc/es6"}
    },
    plugins: (() => {
      const plugins = [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /id|^en/)];

      if (environment === "production") {
        plugins.push(new CopyWebpackPlugin([{
          from: path.resolve("assets"),
          to: path.resolve("dist", "assets"),
          ignore: ['.*']
        }]));

        plugins.push(new CopyWebpackPlugin([{
          from: path.resolve("sw-files"),
          to: path.resolve("dist", ""),
          ignore: ['.*']
        }]));
      } else {
        plugins.push({
          started: false,
          apply(compiler) {
            compiler.hooks.compilation.tap("HtmlListenerReload", (compilation) => {
              compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap("InjectScript", (data) => {
                const match = (data && data.html) ? data.html.match(/<body[^>]*>[\s\S]*<\/body>/gi) : [];

                if (Array.isArray(match) && match[0]) {
                  data.html = data.html.split(match);
                  data.html = data.html[0] + match + '<script>' +
                    'self.onmessageOld=self.onmessage;' +
                    'self.onmessage=function(){' +
                    'arguments&&arguments.length&&"webpackHotUpdateRELOAD"===arguments[0].data&&self.location.reload();' +
                    'self.onmessageOld&&"function"==typeof self.onmessageOld&&self.onmessageOld.apply(self.onmessageOld,arguments)};' +
                    '</script>' + data.html[1];
                }
              });
            });

            compiler.hooks.done.tap("HtmlEmitterReload", () => {
              if (this.started && devServer && Object.keys(compiler.watchFileSystem.watcher.mtimes)
                .some(filePath => '.html'.includes(path.parse(filePath).ext))) {
                devServer.sockWrite(devServer.sockets, "hash", "RELOAD");
                devServer.sockWrite(devServer.sockets, "ok");
              }

              this.started = true;
            });
          }
        });
      }

      return plugins;
    })(),
    optimization: {
      splitChunks: {
        cacheGroups: {
          indexpage: {
            test: /[\\/]src[\\/]view[\\/]page[\\/]index[\\/]/,
            name: 'chunk-index',
            chunks: 'all'
          },
          dashboardpage: {
            test: /[\\/]src[\\/]view[\\/]page[\\/]dashboard[\\/]/,
            name: 'chunk-dashboard',
            chunks: 'all'
          }
        }
      }
    }
  }
};

任何答案将不胜感激。谢谢

Answer 1

尝试将您的主要位置更新到以下位置，并确保dist文件夹是您指向的html文件夹。

server {

    ...
    index index.html;
    location / {
        try_files $uri /index.html;
    }
    ...
}

仅使用Nginx渲染的vue-cli生产版本

1 个答案: