Hi.
I have a problem with fonts path and also for images added throw background-image path in dev mode.
For build it's ok.
I am using vite in wordpress.
inc.vite.php
// enqueue hook
add_action('wp_enqueue_scripts', function () {
if (defined('IS_VITE_DEVELOPMENT') && IS_VITE_DEVELOPMENT === true) {
// insert hmr into head for live reload
function vite_head_module_hook()
{
echo '<script type="module" crossorigin src="http://localhost:3000/main.js"></script>';
}
add_action('wp_head', 'vite_head_module_hook');
} else {
wp_enqueue_style('main', get_template_directory_uri() . '/dist/main.css');
wp_enqueue_script('main', get_template_directory_uri() . '/dist/main.js', [], null, true);
}
});
import { defineConfig } from "vite";
import liveReload from "vite-plugin-live-reload";
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");
const fs = require("fs");
const path = require("path");
export default defineConfig({
plugins: [
vue(),
liveReload(__dirname + "/**/*.php"),
],
root: "",
base: process.env.NODE_ENV === "development" ? "/" : "/dist/",
build: {
// output dir for production build
outDir: resolve(__dirname, "./dist"),
emptyOutDir: true,
// emit manifest so PHP can find the hashed files
// manifest: true,
manifest: false,
// esbuild target
target: "es2018",
// our entry
rollupOptions: {
input: {
main: resolve(__dirname + "/main.js"),
},
output: {
entryFileNames: `[name].js`,
chunkFileNames: `[name].js`,
assetFileNames: `[name].[ext]`,
// manualChunks: {
// vendor: ["vue", "pinia"],
// },
},
},
// minifying switch
minify: true,
write: true,
},
css: {
devSourcemap: true,
},
server: {
// required to load scripts from custom host
cors: true,
// we need a strict port to match on PHP side
// change freely, but update in your functions.php to match the same port
strictPort: true,
port: 3000,
// serve over http
https: false,
hmr: {
host: "localhost",
//port: 443
},
},
});
GET http://bs-altuofianco-shop.local/fonts/Comfortaa-Bold.woff2 net::ERR_ABORTED 404 (Not Found)