Не работают алиасы в vue cli

Question

Проект пишу на TypeScript. Добавляю алиасы так:

configureWebpack: {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'Components': path.resolve(__dirname, './src/сomponents'),
      'API': path.resolve(__dirname, './src/api'),
      'Mixins': path.resolve(__dirname, './src/mixins'),
    },
  },
},

Но получаю ошибку при сборке.

This dependency was not found:

Mixins/application/ApplicationMixin in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save Mixins/application/ApplicationMixin

Так же алиасы не видит IDE. Как решить проблему?

Answer 1

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

Для того чтобы работали алиасы(например: Api,Components) и их видел IDE(например, PhpStorm) сначало необходимо указать paths в tsconfig.json:

"paths": {
  "@/*": [
    "src/*"
  ],
  "Api/*": [
    "./src/api/*"
  ],
  "Components/*": [
    "./src/components/*"
  ]
},

А затем продублировать их в vue.config.js:

configureWebpack: {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'Components': path.resolve(__dirname, './src/сomponents'),
      'API': path.resolve(__dirname, './src/api'),
      'Mixins': path.resolve(__dirname, './src/mixins'),
    },
  },
},

Проверено на @vue/cli 4.5.8.

БЛОГ НА HUSL

Не работают алиасы в vue cli

Ответы (1 шт):