如何使用@/xxxx/component.vue导入vuejs组件？

Question

我正在尝试使用laravel创建一个名为core-ui的vuejs模板。我的问题是这个file。当我编译它时，会给出这个错误：

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
....

但是，我从模板中提取了the.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"
 }
}

Answer 1

负责将@符号映射到组件目录的是您的webpack配置。

如果您使用的是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'); 

Answer 2

在您的package.json中添加：

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

在json的底部