Home > vue.config.jsの色々

vue.config.jsの色々

vue.config.jsの色々

07月 16日

初めて vue-cli@v3 を触りました

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

vue-cli

vue-cli@v3

frontend という名目でディレクトリを新たに切ります。

# vue-cli@v3
vue create frontend

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

vue-cli installation

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

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

フロントエンドの作業場所を指定する

先に vue-cli@v3 を展開した frontend 下で作業を進めますが、エントリーポイントや出力先などを設定します。

pages

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

ビルド後に生成されるトランスパイル済ファイルは outputDir で指定した先に置くことになっていますが、今回は index.php などベースファイルの置かれている 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 を使うことにした訳ですが、

vue-router

サーバサイドでルーティングを既に作っていたこと。このルーティングに合わせて frontend/main.ts 内でルーティングリストを準備。ルーティングリスト作成は以下 Vueインスタンスを生成して描画する方法をご確認いただければ。🙏

マウントせずに Vueを描画する

起点を指定する

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

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

すると以下のように実現できます。

import Vue from 'vue'

// 動的インポートを実現します
const HelloWorld = () => import(`@/components/HelloWorld.vue`)

export default Vue.extend({
    components: {
        HelloWorld
    }
})

最後に、

これにて CakePHPに vue-cli@v3 を組み込むことができました。主に Vueインスタンスを生成して描画していますが、その他こんな方法でも描画できるんだという発見は一昨日の記事と合わせてご確認いただければ..🙏

マウントせずに Vueを描画する

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

コメントを残す