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