Vue CLI 3でsrcパスの変更方法

はじめに

Vue CLI 3がリリースされ、2から乗り換えを検討するため、いろいろと検証した中でsrcのパスを標準のパス「{project_root}/src」から別の場所に変更しようとしてはまったので、解決方法をメモしておきます。(webpackに慣れている人なら何でもない事なんでしょうが、、)

環境

• Vue CLI: 3.01
• Typescript: 3.0.1

パス構成

		デフォルト	変更後
1	ソースルート	src/	src/main/client/
2	出力先ルート	dist/	src/main/resources/static/
3	index.htmlテンプレート	public/index.html	src/main/client/public/index.html

spring bootとの連携するためのフォルダ構成になっています。

手順

@vue/cliのインストール、プロジェクトの生成についてはここでは記載しません。

@nunulkさんの記事が参考になります。
Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる

1. vue.config.jsの作成

プロジェクトルート直下にvue.config.jsを作成します。

vue.config.jsの詳細については下記を参照してください。
Vue CLI 3 Configuration Reference

const path = require('path')

module.exports = {
    configureWebpack: {
        resolve: {
          alias: {
            '@': path.join(__dirname, '/src/main/client') // 1. @の参照先の変更
          }
        }
    },
    outputDir: 'src/main/resources/static', // 2. 出力先
    pages: {
        index: {
            entry: 'src/main/client/main.ts', // エントリーポイント
            template: 'src/main/client/public/index.html', //3. index.htmlテンプレート
            filename: 'index.html' // 省略可
        }
    }
}

2.tsconfig.jsonの編集

...
// pathsの編集
"paths": {
      "@/*": [
        // "src/*"
        "src/main/client/*"
      ]
    },

...
// includeの編集
// src/** ..の部分を変更後のパスに書き換える
"include": [
    "src/main/client/**/*.ts",
    "src/main/client/**/*.tsx",
    "src/main/client/**/*.vue",
    "test/main/client/**/*.ts",
    "test/main/client/**/*.tsx"
],

以上です。

まとめ

簡単な設定変更なのかもしれませんが、数時間悩みました。
私自身フロントエンドのビルドツールはまだまだ経験がありませんので、間違いがあればご指摘いただけると幸いです。

この次はspring boot 2(+ kotlin) + gradle + vue cli3( + typescript + scss)あたりで環境構築についての記事が書けたらいいなと思います。