首页 >php框架 >Laravel > 正文

分享一个​Laravel Mix编译Vue踩坑记录

转载2021-09-13 15:30:100969
下面由Laravel教程栏目给大家分享一个Laravel Mix 编译 Vue 踩坑记录,希望对需要的朋友有所帮助!

Laravel Mix 编译 Vue 踩坑记录

环境:

// package
"laravel-mix": "^6.0.6",
// composer
"laravel/framework": "^8.54"
node version v15.14.0
npm version 7.7.6

首先 npm 需要安装依赖 vue, vue-loader, vue-template-compiler

然后打开 webpack.mix.js 文件

// 将
mix.js('resources/js/app.js', 'public/js')
// 修改为
mix.js('resources/js/app.js', 'public/js').vue()

打开 /resources/js/app.js

import Vue from 'vue'  // 必须引入 vue 
require('./bootstrap');
Vue.component('welcome-component', require('./components/WelcomeComponent.vue').default); // 组件后需要添加 .default 否则会报错
const app = new Vue({
    el: '#app'
});

执行,关于 .default 的说明看这里 https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

npm run dev

到此就差不多了,使用 Laravel-Mix 6 之后有一些变化,这里记录一下。

以上就是分享一个​Laravel Mix编译Vue踩坑记录的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:learnku,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Laravel
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • Laravel电商项目实战课程Laravel电商项目实战课程
  • Laravel 5.8 中文文档手册Laravel 5.8 中文文档手册
  • Laravel5.7框架视频教程Laravel5.7框架视频教程
  • 快速掌握Laravel框架-基础篇快速掌握Laravel框架-基础篇
  • 视频教程分类