Vue cli 3项目别名src到@或~/不起作用答案

【问题标题】：Vue cli 3 project alias src to @ or ~/ not workingVue cli 3项目别名src到@或~/不起作用
【发布时间】：2019-08-14 01:12:07
【问题描述】：

我已经用vue cli 3 安装了这个项目，但是随着项目的发展，组件的导入变得越来越难看，我最终导入了一个类似的组件

import Component from '../../../../components/folder/Component.vue'

我只想给 src 文件夹起别名并做

import Component from '@components/folder/Component.vue'

我确实读到我必须修改vue.config.js，我已经完成了但错误是一样的

Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'

这是我的 vue.config.js

  const path = require("path");

  const vueSrc = "./src";

  module.exports = {
    runtimeCompiler: true,
    css: {
      modules: true
    },
    configureWebpack: {
      resolve: {
        alias: {
          "@": path.join(__dirname, vueSrc)
        }
      }
    }
  };

我错过了什么吗？我还应该做什么？

【问题讨论】：

使用 Vue CLI 生成的项目应该已经拥有该别名，无需任何额外配置。
CLI内置的，可以试试import Component from '@/components/folder/Component.vue'吗？

标签： javascript vue.js webpack vue-cli-3

【解决方案1】：

完整示例：

const path = require("path");
const vueSrc = "./src";
module.exports = {
  runtimeCompiler: true,
  css: {
    modules: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, vueSrc)
      },
      extensions: ['.js', '.vue', '.json']
    }
  }
};

虽然我不确定扩展是否能解决您遇到的问题。如果您没有在导入定义中编写扩展名，这只会添加扩展名： https://webpack.js.org/configuration/resolve/#resolveextensions

我觉得缺少/ 是个问题。所以应该是@/components/Permissions/PermissionsTable 而不是@components/Permissions/PermissionsTable，因为您没有在vueSrc 的末尾添加/。所以 webpack 只会将它附加到 ./src，如下所示：./srccomponents/Permissions/PermissionsTable。

【讨论】：

【解决方案2】：

我错过了extensions: ['.js', '.vue', '.json'],，在导入时我必须使用'@/components/...'

【讨论】：

您能否提供整个 webpack 配置代码，以便其他有相同问题/问题的人可以依赖？ ty

【解决方案3】：

对于 Vue CLI，您需要在项目的根文件夹中创建一个文件 - jsconfig.json

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

仅此而已，PhpStorm 帮助了我

【讨论】：

【解决方案4】：

你有

import Component from '@components/folder/Component.vue'

但你需要

import Component from '@/components/folder/Component'

【讨论】：