Edited at

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)あたりで環境構築についての記事が書けたらいいなと思います。