在 Wordpress 中使用 Vite/Laravel Vite 插件时热重载无法完全工作

Question

我一直在通过将捆绑移至 Vite 来增强 WordPress 主题，按照本文答案中留下的说明进行操作 - 如何正确创建 wp 队列和函数脚本来运行 vite 前端

现在，我使用的是较新版本的Vite等，我面临的问题主要是围绕

npm run dev

。当我运行

npm run build

时，所有东西都捆绑得很好，所以我很确定热重载就是问题所在。

这是我的 WP 主题中的

package.json

：

    "scripts": {
        "dev": "vite",
        "watch": "npm run dev",
        "build": "vite build",
        "production": "vite build"
    },
    "devDependencies": {
        "@alpinejs/collapse": "^3.13.5",
        "@fancyapps/ui": "^5.0.30",
        "@jeffreyvr/tailwindcss-tailpress": "^2.0.0",
        "@splidejs/splide": "^4.1.4",
        "@splidejs/splide-extension-auto-scroll": "^0.5.3",
        "@tailwindcss/forms": "^0.5.7",
        "@vitejs/plugin-vue": "^5.0.4",
        "alpinejs": "^3.12.0",
        "aos": "^3.0.0-beta.6",
        "autoprefixer": "^10.4.0",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^6.0.3",
        "dotenv": "^16.0.3",
        "laravel-vite-plugin": "^1.0.2",
        "postcss": "^8.2.10",
        "postcss-import": "^14.0.0",
        "postcss-nested": "^5.0.3",
        "postcss-nested-ancestors": "^2.0.0",
        "resolve-url-loader": "^3.1.2",
        "tailwindcss": "^3.4.0",
        "vite": "^5.2.10"
    }

以下是我的

vite.config.mjs

文件中的内容：

import {defineConfig} from "vite"
import path from 'path'
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import dotenv from 'dotenv'

dotenv.config({
    path: path.resolve(__dirname, '../../../../.env')
});

const domain = process.env.WP_HOME.replace(/^https?:\/\//i, '');
const domainName = domain.split('/')[0];

export default defineConfig(() => ({
    base: '',
    build: {
        emptyOutDir: true,
        manifest: true,
        outDir: 'build',
        assetsDir: 'assets',
    },
    plugins: [
        laravel({
            publicDirectory: 'build',
            input: [
                'resources/js/app.js',
                'resources/css/app.css',
                'resources/css/editor-style.css'
            ],
            refresh: [
                '**.php',
                '**.vue',
                '**.css',
            ]
        }),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directly as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        https: false,
        host: domainName,
    },
    resolve: {
        alias: [
            {
                find: /~(.+)/,
                replacement: process.cwd() + '/node_modules/$1'
            },
        ]
    }
}));

现在，当我运行

npm run dev

并访问我的网站时，我在控制台中收到此错误：

Uncaught SyntaxError: Cannot use import statement outside a module (at app.js:1:1)

有问题的文件（来自控制台）如下所示：

import Alpine from "/node_modules/.vite/deps/alpinejs.js?v=9c9d644e"
import collapse from "/node_modules/.vite/deps/@alpinejs_collapse.js?v=9c9d644e"
import AOS from "/node_modules/.vite/deps/aos.js?v=9c9d644e"
import Splide from "/node_modules/.vite/deps/@splidejs_splide.js?v=9c9d644e"

// import { AutoScroll } from '@splidejs/splide-extension-auto-scroll'

import {Fancybox} from "/node_modules/.vite/deps/@fancyapps_ui.js?v=9c9d644e"
import "/node_modules/@fancyapps/ui/dist/fancybox/fancybox.css"

window.Alpine = Alpine
Alpine.plugin(collapse)
Alpine.start()

document.addEventListener('DOMContentLoaded', function() {
    AOS.init()

    Fancybox.bind("[data-fancybox]")
})

这就是我陷入困境的地方，我不太确定如何解决这个问题。有谁知道我可能会出错的地方吗？

谢谢你

Answer 1

我找不到问题的解决方案，但经过一番谷歌搜索后，我发现了 SouthcoastWeb 的这篇文章 - https://southcoastweb.co.uk/open-source-software/wp-vite/

他们模拟了 WordPress 的 laravel-vite-plugin，在切换到他们的实现后，我的效果非常好。如果将来有人遇到这个问题，我强烈建议使用上面的链接