Vue CL 3配置経路の別名の詳細


Cli 3ツールで、パスのエイリアスを設定します。
最近Vue Cli 3の足場でVueプロジェクトを構築しましたが、buildディレクトリがないことに気づきました。中のwebpackに関するものもなくなりました。公式文書を見て資料を調べたら、全部vue.co fig.jsに配置されています。
パスの別名を設定します。引用しやすくて、そんなに長く書かなくてもいいです。
設定前:

import TodoList from '../../components/TodoList'
配置後(ファイルの階層関係に関心を持つ必要はない):

import TodoList from 'components/TodoList'
ルートディレクトリに'vue.com fig.js'を追加します。
下記のコードを追加します。

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

import TodoList from 'components/TodoList'
注意事項
  • vue.co.fig.jsファイルを作成した後、操作は不要です。@vue/cli-serviceは自分で識別します。エラーが発生したら、IDEを再起動したり、次の項目を起動したりしてもいいです。
  • vue.co nfig.jsはvueプロジェクトの作成後、デフォルトではなく、オプションのファイル
  • です。
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。