Модуль Vuejs не найден: ошибка не может быть исправлена ​​'@ / components / error с помощью веб-пакета

Question

Я не могу найти ответ на этот вопрос, за исключением того, что, по-видимому, это связано с конфигурацией веб-пакета, о чем я ничего не знаю.

Я хочу использовать следующий способ перехода в каталог приложения, в котором работает веб-пакет-простой шаблон @ / components /, но для меня он просто генерирует ошибку

модуль не найден, ошибка не может устранить '@ / components / error

из чтенияя сделал, есть кое-что, что мне нужно настроить в конфигурации веб-пакета, чтобы сделать эту работу, но я не могу найти, что это, кто-нибудь может помочь, пожалуйста?

В данный момент я пытаюсь это сделать на сервере dev, но, очевидно,стремясь убедиться, что он также будет работать в производстве

Я нашел этот код js, который, я думаю, выполняет то, что я хочу, но не представляю, как бы я работал с настроенным веб-пакетом, как никогда ранее не использовал его

спасибо

{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
          "@/*": [
              "src/*"
          ]
      }
  }
}

Спасибо

Answer 1

Единственное, что я делаю с Webpack, это создаю псевдоним, чтобы @ указывал на корневой каталог js. Это устраняет необходимость относительных путей при импорте файлов. Добавьте следующий код в webpack.mix.js.

mix.webpackConfig({    
  resolve: {      
    alias: {
 @’: __dirname + '/resources/assets/js'      
    },    
  },  
})

https://medium.com/@sadnub/vuejs-and-laravel-api-part-2-711c4986281c

Answer 2

Я использую этот шаблон: https://github.com/vuejs-templates/webpack.

В уже созданном webpack.base.conf это часть экспортированного объекта конфигурации (я включаю более, чем уместно, чтобы дать контекст):

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
  },
  plugins: [
    // make jquery available for all modules
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    })
  ],
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

Это часть, которая может вам помочь:

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

Теперь при импорте я просто пишу что-то вроде

import myModule from '@/fileInSrcFolder';

где @ - папка src внутри корневой папки.

Просто для завершения, файл конфигурации находится в папке в корневой папке, а функция разрешения выглядит следующим образом:

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}