Webpack

由於 vue-cli 隱含 webpack 設定，@/ 預設會指到 src，另外也可以透過以下調整 vue.config.js 額外設定目錄別名：

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@components', resolve('src/components'))
            .set('@examComponents', resolve('src/components/exam'))
    }
}

設定完後可以透過以下指令來查看：

vue inspect

---

VS Code IntelliSense

為了讓 VS Code 可以提示代稱，我們需要一個 jsconfig.json 檔案：

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "@assets/*": ["src/assets/*"],
            "@components/*": ["src/components/*"],
            "@examComponents/*": ["src/components/exam/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

設定完成後，VS Code 就具有提示功能了～

關於此檔案的說明可以觀看以下資料：

1. Working with JavaScript
2. VsCode 的 jsconfig 配置文件說明