H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】请教各位,使用IDE对vue项目中webpack配置的alias目录进行定位

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

clipboard.png

回答:

借助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

本文地址:H5W3 » 【前端问题精选】请教各位,使用IDE对vue项目中webpack配置的alias目录进行定位

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址