vue cli と webpack

vueの勉強。

バージョン

% vue -V                                                                             
3.7.0

vue create で作ったプロジェクトにvue-routerのサンプルを入れたらうごかねぇ。

エラーメッセージ

[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.

ドキュメントでいう完全(コンパイラ+ランタイム)のがビルドされていないらしい。

公式にはどこに書けばいいのか書いてなかった。

正解は、ルートのvue.config.jsに以下を追加。

module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      }
    }
}

webpack.config.jsに書いてもダメだったし、色々ダメだった。githubのissueに書いてあった。

ディレクトリ構成は以下

% tree -I node_modules
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── vue.config.js