ホームページ > ウェブフロントエンド > Vue.js > vue3でエイリアスを使用する場合のエラーの解決方法

vue3でエイリアスを使用する場合のエラーの解決方法

王林
リリース: 2023-05-11 09:43:05
転載
1072 人が閲覧しました

vue3 がエイリアスを使用する場合のエラー報告の問題を解決します:

vue-cli3 以降では、vue3 プロジェクトを作成して typescript を使用すると、エイリアスが自動的に設定されます。

プロジェクト ルート パスの下の tsconfig.json を参照してください

"baseUrl": ".",
"paths": {
      "@/*": [
        "src/*"
      ]
    }
"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ]
ログイン後にコピー

まず、パスが正しいかどうかです。vetur プラグインが使用すると、エイリアス パスが見つからないことが報告され続けます。

したがって、vetur プラグインの構成で直接構成を変更できます。

設定を開いて、 vetur プラグインを見つけます

vue3でエイリアスを使用する場合のエラーの解決方法

setting.json を見つけます

vue3でエイリアスを使用する場合のエラーの解決方法

を設定します

setting.json## の #"vetur.validation.script": false

vue3でエイリアスを使用する場合のエラーの解決方法

を追加して

の問題を解決しますvetur エラー報告の問題

このプロジェクトに

vue.config.js ファイルを追加する必要はありません

添付ファイル: のエイリアス設定vue

3.0 Vue の場合は、新しい vue.config.js を作成します。

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '#': resolve('src'),
            }
        }
    },
}
ログイン後にコピー

ルーティング ファイルでは、

import Login from '#/views/Login.vue'
ログイン後にコピー

のように記述できます。別の例として、src/views ディレクトリのエイリアスを views

const path = require('path')
 
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '#': resolve('src'),
                'views':resolve('src/views'),
            }
        }
    },
 
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from 'views/Login.vue'
ログイン後にコピー
に設定します。備考: Self -built vue .config.js とデフォルト設定が最終設定にマージされます。

以上がvue3でエイリアスを使用する場合のエラーの解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート