现阶段一些前端界面还是使用了Laravel框架+Vue结合起来写，每次import的时候，都是长长的相对路径，比如 ../../../utils/utils，看起来很别扭。

花上两分钟时间，让你在VSCode可以使用import utils from "@/utils/utils"的import语句; 并且，还可以让VScode继续保持着代码自动补全功能。

Alias配置

Lavarel的Webpack配置文件是webpack.mix.js，往里边添加内容：

1
2
3
4
5
6
7

mix.webpackConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "resources/assets/js")
    }
  }
})

修改之后的内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

let mix = require("laravel-mix")

mix.webpackConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "resources/assets/js")
    }
  }
})

mix
  .js("resources/assets/js/app.js", "public/js")
  .sass("resources/assets/sass/app.scss", "public/css")

即将 @ 解析至 resources/assets/js 目录

VScode配置

这样子解析之后，VScode就不能自动补全代码了，顺便我们一起配置一下，创建一个文件jsconfig.js（与webpack.mix.js同级）

内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "compilerOptions": {
    "baseUrl": ".",
    "include": ["resources/assets/js/**/*"],
    "paths": {
      "@/*": ["resources/assets/js/*"]
    }
  },
  "exclude": [
    "app",
    "bootstrap",
    "config",
    "database",
    "node_modules",
    "public",
    "routes",
    "storage",
    "tests",
    "vendor"
  ]
}

OK，这样子VScode的代码补全也都好了，可以爽快的编码了。~