主页 / 问题 / 1210982
Accepted
doox911
Asked:2021-11-28 18:39:40 +0800 CST2021-11-28 18:39:40 +0800 CST

别名在 vue cli 中不起作用

  • 772

我添加这样的别名：

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'),
    },
  },
},

但是我在构建时遇到错误。

未找到此依赖项：

./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./中的 Mixins/application/ApplicationMixin 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&

要安装它，你可以运行： npm install --save Mixins/application/ApplicationMixin

此外， IDE看不到 alias 。如何解决问题？

typescript

1 个回答

  1. Best Answer

    由于我花了很多时间使它工作，我分享我的经验。也许有人会帮助并减少设置时间。

    为了使别名起作用（例如：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上测试。

    • 2

相关问题