Vue + webpack プロジェクトのインポート パスとパス エイリアス

  インポート パス

Vueプロジェクト        では、参照を渡す次の方法によく遭遇します。

import './plugins/element.js'

import '../router';

import '@/scss/common/var';

import 'common/flexible.js'

        1. ./は  現在のディレクトリを示します
        2. ../は親ディレクトリを示します
        3. @/は webpack によって設定されたパス エイリアスです。それが表すパスは、プロジェクトがvue-cli2スキャフォールディングで作成された場合、ビルドによって異なりますwebpack のフォルダwebpack.base.conf.jsで@を構成する方法は、 v ue-cli3 で作成されたプロジェクトであれば、vue.config.jsファイルで確認できます。

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
}

        上記の例 @/は、 srcフォルダー へのパスを表します。

4.ファイルを示す 「 /」、「./」、「../」、または「@/ 」        が先頭にない場合、パスはnode_modules フォルダーです。Vue プロジェクトはnpmを使用してプラグインをインストールします. インストール後、プラグインは プロジェクトの node_modulesフォルダに配置されます. したがって、プラグインをインポートするときは、例としてvue-quill-editorプラグインを取り上げます:次のように記述します。

import VueQuillEditor from 'vue-quill-editor'

Vue パス エイリアス

vue        を書くとき、多くのコンポーネントや css スタイルを導入する必要があります。ファイルやレイヤーが増えると、インポートが面倒になり、「.../.../」をたくさん書かなければなりません。たとえば、「  import '../.. /../plugins/element .js'  "、記述の便宜上、vue パスにエイリアスを設定して、コードの入力時間を節約し、開発効率を向上させることができます。

        プロジェクトのルート パスに新しいvue.config.jsファイルを作成し(存在しない場合は作成します)、ファイルに次のコードを入力します。

const path = require('path');        // 引入path模块
function resolve(dir){    // 声明一个函数,调用函数的时候传入相对路径
  return path.join(__dirname,dir)    // path.join(__dirname)设置绝对路径
}
module.exports = defineConfig({
  chainWebpack:(config)=>{
    config.resolve.alias
      // .set('路径别名', resolve('vue.config文件的相对路径'))
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('network', resolve('src/network'))
  }
})

vue.config.js         を変更したら、プロジェクトを再実行して有効にする必要があります。最後に、 srcファイル の下のアセットにロゴイメージをロードする場合は、次のように直接インポートできます。

import logo from 'assets/logo.png'