vue-cliで作成したプロジェクトにvue.config.jsを追加する

時間がないから今すぐ知りたい

@vue/cli 4.4.1のデフォルトで作成すると存在しないので、プロジェクトルートに作る。

環境

macOS Catalina 10.15.5
@vue/cli: 4.4.1

今回やりたいこと

vue-cliで作成したプロジェクトのApp.vueにVue.jsの公式ガイドの「要素間のトランジション」を書いたらエラーになった。

chrome_devtool_console

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <VA>
       <App> at src/App.vue
         <Root>

上記のエラーメッセージで検索すると以下がヒットする。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. #2754

回答として貼られているのはvue.config.jsのリファレンス。
runtimeCompilerをtrueにすれば本エラーの回避ができるようだ。

さぁ、vue.config.jsで設定しよう。

あれ？vue.config.jsはどこ？

ところがvue-cliで作成したプロジェクトにはvue.config.jsが存在しない。

tree

.(プロジェクトルート)
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock

なければ作ろう

プロジェクトルートにvue.config.jsという名前で作成する。

tree

.(プロジェクトルート)
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js // <- 新規作成
└── yarn.lock

記載する内容は以下。

vue.config.js

module.exports = {
    runtimeCompiler: true
}

サーバーを起動している場合、vue.config.jsを読み込むためにここで一旦再起動を行う。

何故書いた？

少なくとも3回は忘れたので自分で記事を書いた。