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

Posted 2023-02-22

【中文标题】Vue cli 3项目别名src到@或~/不起作用

【英文标题】：Vue cli 3 project alias src to @ or ~/ not working

【发布时间】：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'吗？

【参考方案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'