最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

How to integrate vite in a wordpress project without 404 on localhost:5173 - Stack Overflow

programmeradmin7浏览0评论

My wordpress theme is a custom theme based on the native wp architecture ans local server is xampp

My vite config is the following based on this tutorial /@raulcanodev/setting-up-vite-in-wordpress-theme-c215d4ddfa0e

import { defineConfig } from 'vite';
import { resolve } from 'path';

// Get the main.js where all your JavaScript files are imported
const JS_FILE = resolve('src/js/scripts.js')

// Define where the compiled and minified JavaScript files will be saved
const BUILD_DIR = resolve(__dirname, 'dist');

export default defineConfig({
  build: {
    assetsDir: '', // Will save the compiled JavaScript files in the root of the dist folder
    manifest: true, // Generate manifest.json file (for caching)
    emptyOutDir: true, // Empty the dist folder before building
    outDir: BUILD_DIR,
    rollupOptions: {
      input: JS_FILE,
    },
  },
});

and my enqueue functions

add_action('wp_enqueue_scripts', function(){
    $manifestPath = get_theme_file_path('dist/.vite/manifest.json');
    
    // Check if the manifest file exists and is readable before using it
    if (file_exists($manifestPath)) {
        $manifest = json_decode(file_get_contents($manifestPath), true);
        // Check if the file is in the manifest before enqueuing
        if (isset($manifest['src/js/scripts.js'])) {
            wp_enqueue_script('np', get_theme_file_uri('dist/' . $manifest['src/js/scripts.js']['file']));
             // Enqueue the CSS file
             wp_enqueue_style('np', get_theme_file_uri('dist/' . $manifest['src/js/scripts.js']['css'][0]));
        }
    }
    else {
        
    }
});

i run

npm run start

all is working good on

but if i run

npm run dev 

http://localhost:5173 gives a 404 error

What should i do to make it work ?

Thanks in advance.

发布评论

评论列表(0)

  1. 暂无评论