标签: laravel-vite

在以前在 Laravel 应用程序中设置惯性的方法中，我可以调整 `createInertiaApp 函数中的解析属性：

{
   ...,
   resolve: name => import("./Pages/${name}"),
   ...
}

到

{
   ...,
   resolve: name => {
    const page = require("./Pages/${name}").default
    if(!page.layout) {
     page.layout = DefaultLayoutFile
    }
   },
   ...
}

允许我手动传递要在页面中使用的默认布局文件。

但随着 Vite 成为默认的资源捆绑器，并且根据文档，我必须使用一个resolvePageComponent函数，该函数接受import.meta.glob第二个参数来指示 Vite 要捆绑哪些文件。

这里的问题是导入从此返回resolvePageComponent，因此我无法像通常从 require 函数那样访问默认对象。

所以我无法将默认布局文件附加到导入的页面。

有人能找到解决方法吗？

vitejs 中已经有“watch”属性了吗？我正在使用 Laravel Framework 9.19.0 启动一个新项目，其中 vite 是自动安装的。我在前面添加了 alpine.js。我试过跑

npm 运行手表

这是我的 package.json 文件

{
"private": true,
"scripts": {
    "watch": "npm-watch",                       <-<=-----I've added this line------->
    "dev": "vite",
    "build": "vite build"
},
"devDependencies": {
    "axios": "^0.25",
    "laravel-vite-plugin": "^0.2.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "vite": "^2.9.11"
},
"dependencies": {
    "alpinejs": "^3.10.2"
}

}

并发生以下错误。

   0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose …

我有一个 Laravel 8 项目，使用 PHP7，想尝试一下 Laravel Breeze，但是根据 Laravel 文档安装后，Tailwind 样式没有反映在我的登录和注册页面上。

页面顶部有一个损坏的脚本加载 @vite('resources/css/app.css', 'resources/js/app.js')

我检查了 app.blade.php 和 guest.blade 并发现 @vite('resources/css/app.css', 'resources/js/app.js') 正在加载到 head 部分。

这里缺少什么？我需要不同的配置来编译我的资产吗？

我正在使用 Laravel 9.27.0

我试图直接引用位于资源/视图上的 master.blade.php 上的图像。该图像被用作我正在开发的网站的图标。根据文档，我应该能够通过将以下内容添加到我的 app.js 来使用 Vite 引用此图像

import.meta.glob([
  '../images/**'
]);

我应该使用此代码引用刀片中的图像。

{{ Vite::asset('resources/images/favicon.png') }}

然而我不断得到Unable to locate file in Vite manifest: resources/images/favicon.png.

我是否误解了这一点或者我做错了什么？

我在将 DataTables 添加到新的 Laravel 9.21 实例时遇到问题。但我在控制台中收到错误。我缺少什么？

未捕获的类型错误：$(...).DataTable 不是函数

bootstrap.js

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

import DataTable from 'datatables.net';
window.DataTable = DataTable;

$(document).ready(function() {
    $('#example').DataTable();
});

如何处理将多个 .css 和 .js 文件混合到一个文件中（laravel mix迄今为止一直这样做）。

新的Laravel 9安装了Vite.js，并删除了laravel mix。由于我们最常使用laravel mix的主要功能是将 /resource 文件夹中的文件混合到 /public 文件夹中（许多文件合并为一个）。你是如何处理这个问题的，或者你还在使用 laravel mix 和 Vite 吗？

So Laravel decided to innovate once again and fix what was not broken, so Mix is gone and now default asset bundling goes with Vite.

I'm following the absolute default in their documentation to a bunch of front-end bugs and finally only several remained:

I use Laragon with SSL.

I haven't configured anything additional and my vite.config.js looks like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [ …

所以之前，用laravel MIX，在webpack.mix.js文件中，你可以这样写

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/main.scss', 'public/css')
    .sass('resources/sass/header.scss', 'public/css')

并将其public/asset单独编译。就像 JS 文件将被编译为public/asset/jssass 文件一样public/asset/css。当您将文件放入head视图blaze.php中时，您只需编写

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/header.js') }}"></script>

我如何将其与现在的 Laravel-Vite 结合起来？因为当我运行npm run dev单独的文件scss并js在一个文件夹中一起编译时，该文件夹是public/build/assets/. 他们没有区分js文件是否进入js文件夹和scss文件是否进入css文件夹。

这是我的样子vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export …

如何让 SSR 与 Vite 一起用于我的 Laravel 项目？

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),

但文件的内容应该是什么ssr.js？

这是我的文件的内容js：

import { createApp, markRaw } from "vue";
import router from "./router";
// Route is file with the Routes:
// import {
//   createRouter,
//   createWebHashHistory,
// } from "vue-router";

import { createPinia } from "pinia";

import App from "./screens/App.vue";

import ResizeTextarea from "resize-textarea-vue3";
import { useAuthStore } from "@/store/auth";

const pinia = createPinia(); …

我在本地下载了这个模板（https://github.com/sinan-aydogan/tailadmin-laravel），然后将其上传到 Bitbucket 上，以便使用 Laravel Shift 从 Mix 转换为 Vite。然而，当我运行它时，我得到了以下结果。

无法加载资源：net::ERR_CONNECTION_REFUSED vue-i18n.esm-bundler.js:39 您正在运行 vue-i18n 的 esm-bundler 版本。建议将捆绑程序配置为使用布尔文字显式替换功能标志全局变量，以便在最终捆绑包中获得适当的树摇动。initFeatureFlags @ vue-i18n.esm-bundler.js:39 app.js:45 未捕获（承诺中）ReferenceError: require 未在 m2 处的解析 (app.js:45:24) 处定义 (createInertiaApp.js:8:52 ）在exports.createInertiaApp（createInertiaApp.js：12：24）在app.js：43：1 DevTools无法加载源映射：无法加载chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map的内容：系统错误：net::ERR_FILE_NOT_FOUND

请查看屏幕截图以更好地了解错误：

资源/js/app.js

import "./bootstrap";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

/* FontAwesome */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import "@/Sources/icons";

/* Multi-language */
import { createI18n } from "vue-i18n";
import generalLangBg from "@/Lang/bg/general_lang_bg";
import generalLangDe …