vuejs2：在本地完​​美运行，构建良好。部署时引发“无法读取属性调用”错误

Question

我正在使用"@vue/cli-service": "^3.0.1"，但在我们的生产环境中遇到了麻烦，在该生产环境中，任何路由都无法正常工作，但可以在npm run serve的开发环境中工作。我四处搜寻，发现了一些与public的位置，babel设置或动态路由有关的线索。我已经尝试了大多数建议的项目，但似乎都没有用。

您能提供的任何帮助将不胜感激。

文件夹结构如下：

+approot
+--public
+--+--index.html
+--src
+--+--modules
+--+--vender
+--+--App.vue
+--+--main.js

每个路由的配置都与此类似：

import LayoutDashboard from '@/modules/_core/layouts/LayoutDashboard';

export default [
  {
    path: 'home',
    meta: { layout: LayoutDashboard, module: '' },
    component: () => import('./layouts/Home'),
  },
];

我的babel配置看起来像这样：

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        polyfills: [
          'es6.object.assign',
          'es6.object.keys',
          'es7.object.entries',
          'es7.array.includes',
          'es6.array.fill',
          'es6.symbol',
        ],
      },
    ],
  ],
};

我的vue.config.js的导出部分如下所示：

module.exports = {
  devServer: {
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
    stats: {
      colors: true,
      chunks: false,
    },
    disableHostCheck: true,
    host: 'localhost',
    clientLogLevel: 'info',
  },
  lintOnSave: false,
  transpileDependencies: [/\bvue-echarts\b/, /\bresize-detector\b/, /\bvue-c3\b/, /\bvue-masonry\b/, /\bvue-cropper\b/],
  chainWebpack: config => {
    // Add "node_modules" alias
    config.resolve.alias.set('node_modules', path.join(__dirname, './node_modules'));

    // Add styles to entry points
    Object.keys(STYLES).forEach(k => {
      config.entry(k).add(STYLES[k]);
    });

    // Disable "prefetch" plugin since it's not properly working in some browsers
    config.plugins.delete('prefetch');

    // Do not inject "vendor" assets
    config.plugin('html').tap(args => {
      args[0].excludeAssets = [/[/\\]vendor[/\\]/];
      return args;
    });

    // Do not remove whitespaces
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      });

    // Add exclude assets plugin
    config.plugin('html-exclude-assets').use(HtmlWebpackExcludeAssetsPlugin);

    // Non-production config
    if (process.env.NODE_ENV !== 'production') {
      // Exclude vendor styles (except page styles) from the default SCSS rule
      config.module
        .rule('scss')
        .test(/^(?!.*?vendor[/\\]styles[/\\]).*?\.scss$|vendor[/\\]styles[/\\]pages[/\\].*?\.scss$/);

      // Create a rule for handling vendor styles. Do not include page styles
      config.module
        .rule('vendor-css')
        .test(/^.*?vendor[/\\]styles[/\\](?!.*?pages[/\\]).*?\.scss$/)
        .use('extract-css-loader')
        .loader(MiniCssExtractPlugin.loader)
        .options({
          publicPath: '../',
        })
        .end()
        .use('css-loader')
        .loader('css-loader')
        .options({
          sourceMap: false,
          importLoaders: 2,
        })
        .end()
        .use('postcss-loader')
        .loader('postcss-loader')
        .options({
          sourceMap: false,
        })
        .end()
        .use('sass-loader')
        .loader('sass-loader')
        .options({
          sourceMap: false,
        });

      // Add extract-vendor-css plugin
      config.plugin('extract-vendor-css').use(MiniCssExtractPlugin, [
        {
          filename: 'css/[name].css',
          chunkFilename: 'css/[name].css',
        },
      ]);

      // Production config
    } else {
      // Do not generate .js files for stylesheets
      config.plugin('suppress-chunks').use(SuppressChunksPlugin, [Object.keys(STYLES), { filter: /\.js(?:\.map)?$/ }]);

      // Rename vendor styles to remove hashes from their names
      config.plugin('rename-chunks').use(RenameWebpackPlugin, [
        {
          originNameReg: /(appwork(?:-material)?|bootstrap(?:-material)?|colors(?:-material)?|uikit|theme-[^.]+)\..*?\.css$/,
          targetName: '$1.css',
        },
      ]);
    }
  },
};

注意：还向VueJS specific forum发布了问题。

Answer 1

我解决了这个问题。问题出在嵌套组件的文件夹的命名中……一个是名称_core，另一个是_auth。重命名不带前缀的文件后，效果很好。