vscode软件vue项目自定义alias别名

在vue项目中。 不同的文件有不同的路径，有的路径比较深， 有的经常被引用。 所以， 建议使用alias别名对项目文件进行别名引用。 这样引入文件的时候会更加方便。

首先在vue.config.js中的module.exports里配置别名

configureWebpack: {
  // provide the app's title in webpack's name field, so that
  // it can be accessed in index.html to inject the correct title.
  // 自动补全的扩展名
  resolve: {
    alias: {
      '@': resolve('src'),
      'c': resolve('src/components'),
      'u': resolve('src/utils'),
      'v': resolve('src/views'),
      'i': resolve('src/assets/images'),
      's': resolve('src/styles'),
    }
  }
},

新建jsconfig.json， 在这里匹配vue.config.js里的配置

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "u/*": ["src/utils/*"],
      "c/*": ["src/components/*"],
      "v/*": ["src/views/*"],
      "i/*": ["src/assets/images/*"],
      "s/*": ["src/styles/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

以上两个配置只针对当前单一项目进行的配置。 如果想在全局生效。 可以直接在全局设置里配置 3. settings.json里做如下配置

"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src",
  "u": "${workspaceRoot}/src/utils",
  "c": "${workspaceRoot}/src/components",
  "v": "${workspaceRoot}/src/views",
  "a": "${workspaceRoot}/src/assets",
  "i": "${workspaceRoot}/src/assets/images",
  "s": "${workspaceRoot}/src/styles"
},

本教程由互联学术原创编写，转载请注明3ss.cn出处！