Как использовать @ / xxxx / component.vue для импорта компонента vuejs?

Я пытаюсь сделать работоспособным шаблон vuejs под названием core-ui с помощью laravel. Моя проблема в этом файл. Когда я его компилирую, выдает эту ошибку:

These dependencies were not found:

* @/containers/DefaultContainer in ./resources/js/coreui/router/index.js
* @/views/Charts in ./resources/js/coreui/router/index.js
....

To install them, you can run: npm install --save @/containers       /DefaultContainer
....

Однако я взял пакет .json из шаблона и поместил его в пакет laravel. Я студент, поэтому больше, чем просто ответ, я хотел бы знать концепции, которые мне не хватает для работы с этим шаблоном.

Сюда на всякий случай прикрепляю свой package.json.

{
 "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
},
 "devDependencies": {
   "@vue/cli-plugin-babel": "^3.0.1",
   "@vue/cli-plugin-eslint": "^3.0.1",
   "@vue/cli-plugin-unit-jest": "^3.0.1",
   "@vue/cli-service": "^3.0.1",
   "@vue/test-utils": "^1.0.0-beta.24",
   "axios": "^0.18",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "^23.4.2",
   "bootstrap": "^4.0.0",
   "cross-env": "^5.1",
   "jquery": "^3.2",
   "laravel-mix": "^2.0",
   "lodash": "^4.17.5",
   "node-sass": "^4.9.3",
   "popper.js": "^1.12",
   "sass-loader": "^7.1.0",
   "vue": "^2.5.7",
   "vue-template-compiler": "^2.5.17",
   "webpack-dev-server": "^3.1.9"
},
 "dependencies": {
   "@babel/plugin-syntax-dynamic-import": "^7.0.0",
   "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
   "@coreui/coreui": "^2.0.4",
   "@coreui/icons": "0.3.0",
   "@coreui/vue": "^2.0.0",
   "bootstrap": "^4.1.3",
   "bootstrap-vue": "^2.0.0-rc.11",
   "chart.js": "^2.7.2",
   "core-js": "^2.5.7",
   "css-vars-ponyfill": "^1.9.0",
   "flag-icon-css": "^3.0.0",
   "font-awesome": "^4.7.0",
   "mini-toastr": "0.6.6",
   "perfect-scrollbar": "^1.4.0",
   "quill": "^1.3.6",
   "simple-line-icons": "^2.4.1",
   "text-mask-addons": "^3.8.0",
   "v-calendar": "^0.9.7",
   "vue": "^2.5.17",
   "vue-chartjs": "^3.4.0",
   "vue-codemirror": "^4.0.5",
   "vue-grid-layout": "^2.1.13",
   "vue-mq": "^0.2.1",
   "vue-multiselect": "^2.1.0",
   "vue-notifications": "0.9.0",
   "vue-perfect-scrollbar": "^0.1.0",
   "vue-quill-editor": "^3.0.6",
   "vue-resize": "^0.4.4",
   "vue-router": "^3.0.1",
   "vue-select": "2.4.0",
   "vue-simple-calendar": "^3.0.2",
   "vue-tables-2": "^1.4.64",
   "vue-text-mask": "^6.1.2",
   "vue2-google-maps": "^0.10.2",
   "vuelidate": "^0.7.4"
  },
  "browserslist": [
   "> 1%",
   "last 2 versions",
   "not ie <= 9"
 ],
 "engines": {
  "node": ">= 8.10.x",
  "npm": ">= 5.6.0"
 }
}
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
1
0
960
2

Ответы 2

Именно ваша конфигурация веб-пакета отвечает за отображение символа @ в каталоге компонентов.

Если вы используете Laravel Mix, вы можете добавить что-то вроде этого в свой файл webpack.mix.js:

mix.webpackConfig({
resolve: {
    alias: {
        "@": path.resolve(
            __dirname,
             "resources/assets/js/components"
            )
        }
    }
});

Итак, ваш файл должен выглядеть следующим образом:

const path = require('path')
const mix = require('laravel-mix')

mix.webpackConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "resources/js/coreui/")
        }
    }
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css'); 

Здесь та же ошибка. Прикрепляю свой webpack.mix.jsconst path = require('path') const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ resolve: { alias: { "@": path.resolve( __dirname, "resources/js/coreui/" ) } } });

Just sapiens 28.09.2018 10:00

@Justsapiens Я обновил свой ответ, указав, как должна выглядеть ваша конфигурация. Вам необходимо установить mix.webpackConfig перед запуском определенных функций js, sass и т. д.

George Hanson 28.09.2018 10:09

Спасибо за помощь Джордж Хэнсон. Я скопировал и вставил ваш код, но ошибка не устранена

Just sapiens 28.09.2018 10:16

Предположительно вы останавливаете наблюдатель, а затем повторно запускаете npm run watch или аналогичный?

George Hanson 28.09.2018 10:16

Я останавливаюсь, потому что ничего не происходит, и перезапускаю с помощью npm run serve

Just sapiens 28.09.2018 10:18

в вашем package.json добавьте:

"jest": {
  "moduleNameMapper": {
      "@/(.*)$": "<rootDir>/src/$1"
   },
}

внизу json

Другие вопросы по теме