Vueのプロジェクトでaliasを設定する（vue.config.js）

2021年9月6日2022年12月16日

はじめに

Node.jsを使ってVueのプロジェクトを作成（手順はこちらを参照）したとき、
webpack.config.js に書くような設定を vue.config.js に書くことになる。
このときの alias の書き方を調べた。

手順

1. プロジェクトフォルダにvue.config.jsというファイルを作る
   （プロジェクトを作るコマンド vue create project-name を実行しただけで、vue.config.js は自動では作られない）
2. 下記の形式でファイルを書く。

const path = require('path');  
module.exports = {  
 configureWebpack: {  
     resolve: {  
       alias: {  
         // ここにaliasの設定値を書いていく
         // 例）
         // 'jquery': '../jquery.js',  
       },  
     },  
 }
}

• Vueのコンポーネントディレクトリは、vue.config.js で下記のように設定して、
  '@c': path.resolve(__dirname, 'src/components')
  .vueファイルでコンポーネントをimportするときに下記のように使うのが良いっぽい。
  import MyComponent from '@c/MyComponent.vue'
  mixin も同様
• ライブラリによっては webpack.config.js にalias を設定する必要があるものがある。
  node_modulesディレクトリ以下を指定する場合は下記の様に書く。
  'jquery': 'sample_lib/jquery.js', // node_modules/sample_lib/jquery.jsを指定する場合