0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravel8にVue.js導入時のエラー改修

Last updated at Posted at 2021-12-09

Laravel8にVue.js導入

参考 :https://migisanblog.com/laravel-vue-install/#Vuejsをインストールする

とりあえず、「app.blade.php」に以下記述
参考:https://biz.addisteria.com/laravel8_vue_install/#toc9

app.blade.php
<div id="app">
    <example-component></example-component>
</div>

<script src="{{ mix('js/app.js') }}"></script>

chromeのデベロッパーツールを見るとコンソールでエラー

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
 <template>
     <div>
     <button type="button" class="btn m-0 p-1 shadow-none">

webpack.mix.jsを修正

で以下参考に修正
https://zakkuri.life/laravel-mix-npmのパッケージをupgradeしたらコンパイルできなく/

mix.js('resources/js/app.js', 'public/js').vue()  ← 「.vue()」を追記する
    .sass('resources/sass/app.scss', 'public/css');

でnpm run dev実行

Additional dependencies must be installed. This will only take a moment.
 
Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
 
Finished. Please run Mix again.

##「npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps」実行する

再びnpm run dev

でLaravel8にVue.js環境整った

参考
https://zakkuri.life/laravel-mix-npmのパッケージをupgradeしたらコンパイルできなく/
https://blog.maro.style/post-1526/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?