VsCode Vue项目使用别名，并自动提示路径和函数名

最新推荐文章于 2024-05-24 21:55:35 发布

原创最新推荐文章于 2024-05-24 21:55:35 发布 · 719 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vscode #前端

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue.config.js中使用`resolve.alias`配置别名，并添加jsconfig.json文件来管理项目路径，包括自定义别名路径和编译选项。

vue.config.js配置修改:

chainWebpack 配置项下添加 config.resolve.alias.set("@",resolve("src"))

chainWebpack: config => {
      config.resolve.alias.set("@",resolve("src"))
  },

添加jsconfig.json文件:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
      // 配置自定义的别名匹配路径
      "styles/*": [
        "src/assets/styles/*"
      ]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": ["node_modules","AMDist"]
}