vue 配置别名,识别别名路径,别名代码提示,vscode别名路径

配置别名

打开vue.config.js

//方法 const resolve = dir => require("path").join(__dirname, dir); //配置 configureWebpack: { resolve: { alias: { "@": resolve("src"), "@@": resolve("src/components") } } }

让VScode 识别别名

在项目根目录新建文件:jsconfig.json,并写入以下内容

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "src/*" ], "@@/*": [ "src/components/*" ] }, "target": "es2020", "module": "commonjs", "allowSyntheticDefaultImports": true }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "dist" ] }

jsconfig.json配置参考地址

效果