webpack-dev-server - 使用vue作为Multi Page Application时，各个入口点内部目录中的组件不能共用

Question

我正在使用 vue 作为多页面应用程序。我参考构建的包并使用 thymeleaf 来创建和呈现每个页面。

这时候如果我尝试在views/下的两个视图文件中使用views/brand/management/component/BrandSearch.vue组件，就会显示一个空白页面。

但是，在 webpack 开发服务器中，即使我像上面那样使用它，也会显示屏幕。

再一次，如果我把brandSearch组件放在顶部的vue/components中而不是views/下，并公开使用，此时屏幕再次显示。

这是我的问题的摘要

1. 为什么在引用thymeleaf中的bundle时重用views/目录中的组件时不显示屏幕？

2. 为什么会出现在 webpack 开发服务器上？

3. 如果我第二次使用 views/ 下的组件，屏幕不会出现。为什么我使用顶部vue/components中的组件时会出现屏幕？

本来想深入研究一下Webpeck的打包过程，但是因为代码量大，知识欠缺，没看懂。如果您能推荐一篇可能有帮助的文章，我将不胜感激。

感谢提前回复的人。

例子。

https://github.com/Dailyscat/admin_vue_test

我的目录架构：

资源

在此处输入图像描述

Vue

在此处输入图像描述

我的 vue.config.js

    // https://cli.vuejs.org/config
const ExtractTextPlugin = require('mini-css-extract-plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
let webpack = require('webpack')
const pages = {
  sample: 'src/views/sample/main.js',
  modelProduct: 'src/views/modelProduct/main.js',
  productCategory: 'src/views/productCategory/main.js',
  productCategoryKpi: 'src/views/productCategory/kpi/main.js',
  productCategoryDetail: 'src/views/productCategory/detail/main.js',
  productCategoryMapping: 'src/views/productCategoryMapping/main.js',
  searchEvaluation: 'src/views/searchEvaluation/main.js',
  modal: 'src/views/modal/main.js',
  merchantFeedInfo: 'src/views/merchants/feedInfo/main.js',
  topCycle: 'src/views/topCycle/main.js',
  products: 'src/views/products/main.js',
  prohibitionKeyword: 'src/views/keyword/prohibition/main.js',
  coordinates: 'src/views/coordinates/main.js',
  productChangeHistory: 'src/views/productChangeHistory/main.js',
  merchantManagement: 'src/views/merchants/management/main.js',
  cmpManagement: 'src/views/keyword/cmpManagement/main.js',
  categoryAffiliate: 'src/views/category/affiliate/main.js',
  categoryManagement: 'src/views/category/management/main.js',
  categoryStandardSearch: 'src/views/category/standardSearch/main.js',
  catalogChangeHistory: 'src/views/catalogChangeHistory/main.js',
  allowedProduct: 'src/views/keyword/allowedProduct/main.js',
    zProductDetail: 'src/views/products/details/main.js'
}

module.exports = {
  filenameHashing: false,
  outputDir: '../resources/static',
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    proxy: {
      '/admin': {
        target: 'http://localhost:8091'
      }
    },
    port: 18091
  },
  pages,
  configureWebpack: {
    plugins: [
      // new BundleAnalyzerPlugin(),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],
    optimization: {
      chunkIds: 'named',
      splitChunks: {
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all'
          },
          vendor: {
            test: /[\\/]node_modules[\\/](xlsx)[\\/]/,
            chunks: 'initial',
            name: 'chunk-xlsx',
            priority: 10,
            enforce: true
          }
        }
      }
    },
    output: {
      filename: 'js/[name].js'
    }
  },

  chainWebpack: config => {
    Object.keys(pages).forEach(page => {
      config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
      config.plugins.delete(`html-${page}`)
      config.plugins.delete(`preload-${page}`)
      config.plugins.delete(`prefetch-${page}`)
    })

    config.plugin('extract-css').use(ExtractTextPlugin, [
      {
        filename: 'css/[name].css',
        allChunks: true
      }
    ])
  }
}

标签： webpack-dev-servervue-cliwebpack-4vue-cli-3