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