vuejs2: локально работает отлично, прекрасно строит. Выдает ошибку «не могу прочитать вызов свойства» при развертывании - PullRequest
Новая
       13

vuejs2: локально работает отлично, прекрасно строит. Выдает ошибку «не могу прочитать вызов свойства» при развертывании

0 голосов
/ 12 апреля 2019

Я использую "@vue/cli-service": "^3.0.1" и у меня возникают проблемы в нашей производственной среде, где ни одна из маршрутизации не работает, но работает в разработке с npm run serve.Я искал вокруг и нашел несколько отведений, касающихся местоположения public, настроек babel или динамической маршрутизации.Я попробовал большинство предложенных пунктов, но ни один, кажется, не работает.

Буду признателен за любую помощь, которую вы сможете оказать.

error message

Структура папок выглядит следующим образом: 

+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 выглядит такthis: 

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 конкретном форуме .

1 Ответ

0 голосов
/ 12 апреля 2019

Я решил эту проблему. Проблема заключалась в именовании папок, в которые были вложены компоненты ... одна была названа _core, а другая _auth. После переименования тех без префикса это работало отлично.

...