Vue でカスタムパスのエイリアスを設定する方法

Vue でカスタム パス エイリアスを設定する方法

日常の開発では、モジュールやコンポーネントをインポートすることがよくあります。相対パスを使用する場合:

"../../../../../components/tools" から uEditor をインポートします。

肥大化して冗長に見えてしまいます。参照に少しでも間違いがあると -404 エラーが表示され、エレガントではありません。404 エラーは頻繁に発生します。ファイルが変更されると、変更パスを 1 つ 1 つ探して再度修正する必要があり、非常に面倒です。vue cli3 以上のバージョンでは、node_modules にファイル エイリアス機能が提供されています。ただし、特別な要件がない限り、node_modules コードはできるだけ変更しないことをお勧めします。

vue.config.jsを作成し、設定コードを記述します。

モジュール.エクスポート = {
    Webpack を構成する: {
        解決する： {
            alias: { // エイリアスを設定します。変更を有効にするには、変更後に再コンパイルする必要があります 'assets': '@/assets',
                '共通': '@/共通',
                'コンポーネント': '@/コンポーネント',
                'ネットワーク': '@/ネットワーク',
                'ビュー': '@/ビュー',
            }
        }
    }
}

以下のように表示されます。

注意: HTML パスでエイリアスを使用する場合は、参照の前に「~」を付ける必要があります。

文書内のその他の参照:

上記は、Vue でカスタムパスのエイリアスを設定するために紹介した方法です。お役に立てれば幸いです。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。