Блог

Недавно я создал веб-сайт с базой на Node.js , Express.js и Vue.js с маршрутизатором в режиме истории и веб-пакетом. Поскольку это одностраничное приложение, я установил express-history-api-fallback, и пока он работает нормально, но (как всегда, есть но) по некоторым причинам, которые я не понимаю для некоторых URL-адресов, я получаю белую страницу и некоторые ошибки, такие как:

 Uncaught SyntaxError: Unexpected token '<'          ------        manifest.61d5cd8248647cdb144a.js:1
Uncaught SyntaxError: Unexpected token '<'          ------        vendor.db7271094dc9fcde8b9f.js:1
Uncaught SyntaxError: Unexpected token '<'          ------        app.3cfe27cef1608de00b06.js:1 
  

Я не понимаю, проблема в моем файле webpack conf или в моем node.js (Я предполагаю, что это связано с интерфейсом, потому что я не вижу никаких входящих запросов в be) или в моем vue-маршрутизаторе.

Причина, по которой я не понимаю (кроме недостатка знаний), заключается в том, что если я попытаюсь получить доступ к странице в моем приложении Vue, нажав на ссылку (т. Е. Доступ к странице профиля пользователя, отформатированной как mywebsiteinexample.com/user/userId ) это работает, но если я обновлю страницу, я просто смогу увидетьбелая страница и внутри консоли ошибки, о которых я писал выше.

Общая архитектура моих файлов:

вот некоторые, я думаю, полезные фрагменты кода:

Server.js

 const express = require('express')
const fallback = require('express-history-api-fallback')
const path = require('path')

const historyModeHandlerHTTP = express()
const root = `${__dirname}/../`
historyModeHandlerHTTP.use(express.static(root))
historyModeHandlerHTTP.use(fallback(path.join(__dirname   '/../index.html')))

historyModeHandlerHTTP.listen(80, () => {
    console.log('HTTP Server on')
})
  

Webpack.prod.conf.js

 'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRootMain,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin({
      dry: false,
      cleanOnceBeforeBuildPatterns: [config.build.assetsSubDirectory   '*/js/*', config.build.assetsSubDirectory   '*/css/*']
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: true,
    }),
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap ?
        {
          safe: true,
          map: {
            inline: false
          }
        } :
        {
          safe: true
        }
    }),
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'template.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: false,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks(module) {
        return (
          module.resource amp;amp;
          /.js$/.test(module.resource) amp;amp;
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }])
  ]
})

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\.('  
        config.build.productionGzipExtensions.join('|')  
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig
  

const config = require(‘../ config’)

 const path = require('path')

module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},

        // Various Dev Server settings
        host: 'localhost',
        port: 8080, 
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        devtool: 'cheap-module-eval-source-map',
        cacheBusting: true,
        cssSourceMap: true
    },

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../../index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsRootMain: path.resolve(__dirname, '../../'),
        assetsSubDirectory: 'front-end/static',
        assetsPublicPath: '',
        mainfile : 'front-end/src/main.js',
        routerfile : 'front-end/src/router/index.js',
        constantsFile : 'utils-bf/constants.js',
        productionSourceMap: true,
        devtool: '#source-map',
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
    }
}
  

[РЕШЕНИЕ]

Проблема была связана с конфигурацией Webpack! Если кто-то сталкивается с такой же проблемой, просто установите publicPath: ‘/’

   output: {
    publicPath: '/',
    path: config.build.assetsRootMain,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },