请教各位,使用IDE对vue项目中webpack配置的alias目录进行定位

新手上路,请多包涵

在IDE中,例如webstrom,进行Vue项目的开发。在webpack配置了alias,将src目录设置为@。
但是在*.vue中import其他组件使用了@符号,编译器就无法直接获得路径,使用../这样才可以,能否有人可以
解决这个问题呢?

clipboard.png

阅读 4k
3 个回答

借助path即可

const path = require('path');

module.exports = function(options){
    var rootPath = options.rootPath;
    return {
        alias: {
            @: path.join(rootPath, "src")
        }
    }

}
{
  "compilerOptions": {
    "baseUrl": "./",  // all paths are relative to the baseUrl
    "paths": {
        "@/*" : ["src/*"]   
    }
  }
}

解决项目使用了webpack的alias路径引入情况下,vscode不支持代码跳转:
项目根目录新建 jsconfig.json,内容如上;
vscode就可以支持command|ctrl代码跳转了
参考链接:链接描述

新手上路,请多包涵

方案一(推荐):
根目录增加webStorm.config.js

System.config({
  'paths': {
    '@/*': './src/*'
 }
})

参考:https://stackoverflow.com/a/59369029

方案二:
webStorm配置:Settings > Languages & Frameworks > Javascript > Webpack
填入/你的项目目录/build/webpack.base.conf.js

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题