vue/cliのbuild設定を変更する
【所要時間】
2時間（2019年10月7日）
【概要】
・開発環境と本番環境でbuildしたディレクトリの構成が異なるのを修正したい。
・リクエスト先のURLは複数の環境変数できりかえたい。
【要約・学んだこと】
- 複数の環境変数を用意
- ビルド用の開発環境の変数ファイルにproductionモードの指定をする。
- npm scriptを追記
1. 複数の環境変数を用意
vue/cliでは複数の環境変数をnpm scriptで切り替えることができる。 .env.development と .env.production に加えて、 .env.development.build を用意。
vue/cliの環境変数で気をつけなければいけない点は、npm scriptでmodeを指定しない場合に、e2eテストで .env.production ファイルが読み込まれてしまうので、知らずにe2eテストを書くと本番環境のDBを壊してしまう可能性がある。
2. ビルド用の開発環境の変数ファイルにproductionモードの指定をする。
vue.config.js ファイルでwebpackなどの設定を行なうことができるが、暗黙的に行われてよくわからない点が多い。
今回困った点は、本番環境でビルドをすると
dist/
img/
js/
index.htmlのようにjsファイルはjsディレクトリ配下に入るのに、
開発環境でビルドをすると
dist/
img/
index.html
app.js
1.js
2.js
3.js・・・・
のように、dist直下に入ってしまい、deployした後に正常にファイルが読まれなかった点。
これはvue/cliが開発環境と本番環境でいい感じに構成を変えてくれているのだが、関連しそうな設定を変えてもうまくいかなかった。
そこで開発用の環境変数ファイルをcopyし、２つにわけ、開発環境ビルド用のファイルには NODE_ENV=production を指定した。
// ローカルサーバー用.env.developmentVUE_APP_API_URL=""// ビルド用.env.development.buildNODE_ENV=productionVUE_APP_API_URL=""
これで設定はproduction、URLは開発、というビルドができる。
3. npm scriptを追記
// package.json"serve": "vue-cli-service serve --open --mode development", "build:production": "vue-cli-service build --mode production", "build:development": "vue-cli-service build --mode development.build",
これでnpm run uild:development とコマンドを打つと、 .env.development.build ファイルを使ってビルドされる。
【わからなかったこと】
vue/cliでビルド時のディレクトリ構成が思うように変えられなかった。vue.config.jsファイルでwebpackの出力を変えたが、 assetDir で指定しろとエラーが出てしまい、assetDirで指定しても設定が反映されなかった。
【感想】
cli使うのはきびしいかな。と思ったけど今回もなんとかなった。しかし暗黙的に行なわれている部分が多く、情報も少なくよくわからないので、webpack自分で書いた方が楽になる境目が何となく分かった気がした。