Web猫ブログ
vue.config.jsに色々と仕掛ける
vue.config.jsに色々と仕掛ける
07月 16日

初めて Vue CLI を触りました

これまでにお仕事で Vue CLI をベースに使った場面は無く、今回 CakePHP のフロントエンドに Vue CLI を組み込んだ経験を中心に記録します。また前提としてモノリポで進めており、サーバサイドのルーティングを使う (ビルトインサーバで起動といえば正しいでしょうか?) を目指しています。

vue-cli

Vue CLI 導入編

新たに frontend ディレクトリを準備します。

# vue-cli@v3
vue create frontend

具体的なインストール方法は割愛します。

vue-cli installation

ルートディレクトリに今回の主役である vue.config.js を置きます。

module.exports = {
    // 必要に応じて追加します
}

今回 vue-cli@v3 をルートディレクトリでは無い場所で作業を進めるので、エントリーポイントや出力先などを設定する必要があります。

pages

pages: {
    index: {
        entry: './frontend/src/main.ts',
        template: './frontend/public/index.html',
        filename: 'index.html',
        chunks: [
            'chunk-vendors',
            'chunk-common',
            'index'
        ]
    }
}

とある別のコンポーネントをインポートする際に起点となるパスを設定します。

configureWebpack: {
    resolve: {
        alias: {
            // 起点となるパスを設定します
            '@': path.join(__dirname, 'frontend/src/')
        }
    }
}

ビルド後に生成されるトランスパイル済ファイルは CakePHP側からレンダリングされるよう、今回は webroot/dist ディレクトリ下に置くと良さそうです。

またこのままだとハッシュ値が付いた状態でトランスパイルされますが、ハッシュ値を付けない設定も可能です。

chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        // メインJSファイル名にハッシュ値を付けない
        config.output
            .filename('[name].js')
        // chunk-vendorsファイル名にハッシュ値を付けない
        config.output
            .chunkFilename('js/[name].js')
    }
}

基本的にプロジェクト次第ですが、ハッシュ値を付けない方が都合が良くなる場面があるかもしれません。

ルーティングを指定する

順当に vue-router を使うことにした訳ですが、サーバサイドでルーティングを既に作っていたこと。そのためこれに合わせて frontend/main.ts 内でルーティングリストを準備しています。

最後に、

このルーティングを以って初めて CakePHP に Vue を導入することができました。

<div id="app">
    <router-view/>
</div>

上記を .tpl に設定することで、無事にレンダリングされることを確認しましょう😋

今後も必要に応じて共有していきたいと思います。

コメントを残す