webpack中resolve.alias的使用

在項目中我們會使用一些公共的組件或者方法，但是如果項目層級比較深並且組件比較多的話，寫起來就比較麻煩.

在 webpack 配置中添加

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src'),
    },
},

這樣在其它文件中就可以直接引用

import Home from '@/pages/Home';

解決eslint 會報錯問題

先安裝依賴

npm install eslint-import-resolver-webpack --save-dev

增加 eslint 規則

"settings": {
    "import/resolver": {
        "alias": {
            "map": [["@", "./src"]]
        }
    }
}

解決 vscode 識別文件路徑的問題

新建jsconfig.json 文件

{
    "compilerOptions": {
        "target": "es2015",
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "exclude": ["node_module"]
}