问题标签 [laravel-mix-vue3]

[ 使用 Laravel ^8.40 / Inertia JS / Vue ^3.2.11 / Laravel Mix ^6.0.31 ]

我正在开发一个用于发布客户端网站的多租户 SaaS 平台，其中每个租户都有一个或多个项目，每个项目都有自己的混合工作流程。每个租户项目都有针对该租户域的唯一路由，而不是每个单独租户的相同路由，这就是我配置并行混合工作流（每个项目一个工作流）的原因。我发现完全按照我想要的方式配置输出目录结构具有挑战性，我试图根据在线可用的文档来解决这个问题，但我确实觉得我错过了一些东西，而且我在兜圈子...

我的 Vue 组件和 Sass 样式存储在resources/{js|scss}/projects/{tenant}/（也包括pages子目录）中，我希望 Laravel Mix 将所有编译的 JS/CSS文件输出到public/projects/{tenant}/{js|css}/并将mix-manifest.json文件输出到public/projects/{tenant}并拥有所有“ chunk'ed" 页面组件输出到与其他 JS 文件相同的文件夹...虽然我还没有完全完成...我尝试了各种选项组合，但还没有找到获胜的集合。

我的 webpack 文件（{tenant}这里是p017）：

这个 webpack 文件会导致以下（不需要的）目录结构（全部在 下public）：

...这是所需的目录结构（注意mix-manifest.json不应该移动）...

如果我删除该.setPublicPath()行，则该mix-manifest.json文件位于public目录中并与其他租户发生冲突，如果我将输出路径设置为.js()、.vue()、.extract()和.sass(),public/projects/{tenant}/{js|css}/...然后将所有 JS/CSS 文件混合输出为/{js|css}/...（删除projects/{tenant}）解决他们实际去的地方。

可能的问题/解决方案：

有没有办法自定义 mix-manifest.json目录甚至文件名本身，这样我就可以防止租户冲突？

或者，我可以在没有 Laravel Mix从输出路径中剥离的情况下添加public/到每个输出目录中 吗？.js().vue().extract().sass()projects/{tenant}

或者，我是否错过了一组更好/包罗万象的文档，更详细地描述了如何实现这一点？

我想知道如何在布局中使用 .env 文件中的 APP_URL。目前，我有以下内容。

webpack.mix.js

但是，当我npm run prod在服务器上运行和推送时，布局总是会像下面这样加载。

我在我的 .env 中设置：

但是该网站想再次加载 localhost:8080 。我使用 laravel-mix 6.0.27

这是刀片文件

这是 app.js 文件

这是 Demo.vue 文件

演示组件中的道具总是显示未定义！不知道我错过了什么。我也在使用 6.0.34 的 laravel-mix。

我在 Laravel 中安装了 vuejs 并使用了 laravel mix，到目前为止一切正常，但是当我想重新激活数据以进行提供和注入时，我在这段代码中遇到了问题：

和错误：

并且在 app.js 中导入时出现以下错误：

错误

错误

请帮我...

我在 app.js 中使用下面的代码，它不起作用

出现错误如下图

在 上Laravel 5.8，我需要将一个项目从Vue2 翻译到 3。

我将组件调整到停止出错的阶段，并且开始显示组件。但！他们是空的。没有方法或内部属性。但是外部道具有效。终端和控制台中没有错误。为什么？如何解决？

应用程序.js：

私人办公室.vue：

网络包混合：

渲染组件： http: //prntscr.com/1zrqkhd

点击一个按钮，什么都没有发生。

我有一个问题，我想将所有组件提取到单独的存储库中，但我想通过 composer 而不是 npm（业务决策）加载它们。

这一切都很好。将其作为依赖项添加到 composer.json 文件中，然后将以下内容添加到 webpack.mix.js 文件中；

然后使用以下内容将它们导入；

这一切都很好！

直到我想使用插槽。如果我包含一个插槽，我会收到以下错误；

在此示例中，组件如下所示；

现在，如果我将此组件复制到项目存储库中并以​​这种方式加载它，则不会出现错误并按预期工作！

谁能指出我出错的方向。

更新

我已经从我正在渲染的视图中删除了其他组件，现在出现了一个新错误；

更新

这不是答案，而是原因，据我所知，有两个 Vue 实例在运行，一个来自库，一个在我的应用程序中。我不知道如何阻止这种情况，但是如果我将内容推送到仓库并通过 npm 将其拉入，那么它可以正常工作。仍然想知道如何在不使用 npm 的情况下在本地运行它。

运行时npm run development，npm run production我得到这个输出。我正在使用 Node 版本 17.1 和 NPM 版本 8.1.4。

DefinePlugin 中的警告“ VUE_OPTIONS_API ”的 值冲突

我的webpack.mix.js文件：

我的packages.json：

该线程提到我需要指定模式/环境，但对于 Laravel Mix，默认 env 是development.

我有带有 vue3 和 vue-router4 以及 laravel-mix6 webpack-mix 的 laravel 6 项目。我处理来自 laravel 的前缀部分，然后使用 vue-routes 处理同一模块的页面之间的路由，一旦升级到 vue 3，它就可以在 vue 2 上正常工作，例如：

• -当我去 http://localhost:8000/prefix# ->它工作正常。
• - 当我去 http://localhost:8000/prefix#/pageX ->404 not found 。
• - 当我在邮件页面添加并单击它时 -> 它路由到正确的组件但错误的 url http://localhost:8000/pageX 删除了前缀。我尝试使用 base / publicPath 属性但仍然无法正常工作

在 Laravel 应用程序上，尝试运行时：

我收到以下消息：

npm run dev
dev
npm run development
development
mix
Mix 设置不正确。请确保您在混合配置中导入或需要 laravel-mix。
99% 完成插件 BuildOutputPlugin

节点版本：v14.18.2
npm 版本：8.2.0

没有js和css输出到public/js和public/css正在生成，我没有收到其他错误。

我多次删除并读取了 node-modules 文件夹..

有什么想法可以解决这个问题吗？