La página del menú de administración de VueJS SPA para WP no funciona

5 minutos de lectura

avatar de usuario
juniorockwell

El proyecto VueJS fue generado por vue-cli utilizando la plantilla Webpack. Cuando construí para la producción, obtengo uno static carpeta que tiene 2 carpetas y 1 index.html expediente. Las 2 carpetas son css y js. Solo hay un archivo css. Pero hay 3 archivos javascript. Un app.xxxxxxx.js, manifest.xxxxxxxx.jsy vendor.xxxxxxx.js.

Envolví el proyecto de producción VueJS en un servidor Node y un servidor Apache. Para el servidor Node, usé ExpressJS:

...
app.use('/public', express.static(__dirname + '/public'));
app.use('/static', express.static(__dirname + '/public/static'));
app.use('/js', express.static(__dirname + '/public/static/js'));
app.use('/css', express.static(__dirname + '/public/static/css'));
app.get("https://stackoverflow.com/", function(req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});
...

El SPA funciona para Node.

Para el servidor Apache, acabo de transferir todo el marcado HTML del generado index.html a una index.php y asegúrese de leer los directorios CSS y JS.

Estoy tratando de hacer lo mismo con WordPress. Pero sin suerte.

Lo que he hecho con WP hasta ahora es que cargué todos los archivos JS y CSS usando wp_enqueue_script() y wp_enqueue_style(), respectivamente. Pero no puedo hacer que el marcado html funcione junto con los archivos CSS y JS. quizá este es el problema. ¿Qué me estoy perdiendo?

Esto es lo que index.html se vería después de ser generado desde la producción:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>wan_admin3</title>

   <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

<link href=http://stackoverflow.com/static/css/app.49437cdf2228a91c12a30d39ae35bb58.css rel=stylesheet>
</head>

<body>

<div id=app></div>
<script type=text/javascript src=/static/js/manifest.989a96caedc89ff03309.js</script>
<script type=text/javascript src=/static/js/vendor.86018170deacaae1d066.js</script>
<script type=text/javascript src=/static/js/app.6103fd8f82bcb5c38544.js</script>
</body>
</html>

Lo que he hecho en WP functions.php

add_action( 'admin_menu', 'register_my_menu_item' );
function register_my_menu_item() {
   $my_plugins_page = add_menu_page(
     'General Page',
     'General Page',
     'manage_options',
     'mt-top-level-handle',
     'my_plugins_page_callback'
   );
   $subadmin_page = add_submenu_page(
     'mt-top-level-handle',
     'submenu-admin',
     'Sub Level Menu',
     'manage_options',
     'submenu_admin_page',
     'admin_sub_page_callback'
   );
  add_action( 'load-' . $subadmin_page, 'do_enqueue' );
}
function do_enqueue() {
  wp_enqueue_style(
    'subadmin_css_sheet',
    get_theme_file_uri( 'some-admin/subadmin/css/app.49437cdf2228a91c12a30d39ae35bb58.css'),
    array(),
    '1.0.0'
  );
  wp_enqueue_script(
    'subadmin_app_script',
    get_theme_file_uri('some-admin/subadmin/js/app.6103fd8f82bcb5c38544.js'),
    array(),
    '1.0.0',
    true
  );
  wp_enqueue_script(
    'subadmin_manifest_script',
    get_theme_file_uri( 'some-admin/subadmin/js/manifest.989a96caedc89ff03309.js'),
    array(),
    '1.0.0',
    true
  );
  wp_enqueue_script(
    'subadmin_vendor_script',
    get_theme_file_uri( 'some-admin/subadmin/js/vendor.86018170deacaae1d066.js'),
    array(),
    '1.0.0',
    true
  );
}
function my_plugins_page_callback() {
?>
   <div>Hello</div>
<?php
}
function admin_sub_page_callback() {
?>
  <div id="app">Subadmin</div>
<?php
}

El elemento del menú de nivel superior y el submenú muestran cómo deberían ser. Pero cuando hago clic en el menú de subnivel, solo muestra el texto de subadministrador y no el VueJS SPA que funciona en otros entornos.

Texto de subadministrador que se muestra en lugar de VueJS SPA

Sin duda, los archivos JS y CSS se están cargando porque cuando hace clic con el botón derecho en la página web y ve el código fuente, luego hace clic en los enlaces a los archivos JS y CSS, aparecen los códigos.

Captura de pantalla de la etiqueta de enlace del archivo CSS

Captura de pantalla de las etiquetas de secuencia de comandos del archivo JS

La estructura de archivos CSS y JS dentro del twentyseventeen:

La estructura de archivos CSS y JS dentro del veintisiete

Para el extremo HTML dentro del admin_sub_page_callback()acabo de tomar el <div id="app"></div> del original index.html que se generó a partir del proyecto VueJS.

  • ¿Puedes publicar el HTML completo que está generando WordPress? También el index.html que publicaste arriba tiene un pequeño error tipográfico: (...) src=/stati/js/manifest(...) posee stati en vez de static; como dijiste que todos los archivos JavaScript se están cargando, supongo que ese error tipográfico no está en tu archivo HTML real.

    – Nathan Wailes

    8 de julio de 2017 a las 7:37

  • @NathanWailes Arreglé el error tipográfico. Gracias por eso. La salida HTML completa de WP tiene más de 200 líneas de código. No sé si eso ayudará. Pero puedo publicar capturas de pantalla de archivos CSS y JS que se están generando. Y al hacer clic en ellos, se muestra su contenido.

    – juniorockwell

    9 de julio de 2017 a las 21:13

Obtuve widgets Vue.js similares para trabajar con WP, pero solo usando browserify, en lugar de webpack.

No utilicé la plantilla browserify de vue-cli, aunque podría funcionar con eso. En su lugar, usé mi propio paquete.json. Aquí está la esencia: https://gist.github.com/maurop123/eb0c8e884fefe3e40c110b33beff48db

Eso hará un solo archivo. dist/bundle.js para toda la aplicación vue. Luego dejé caer ese archivo dondequiera que estén los archivos js estáticos para mi tema wp.

A continuación, agregué un wp_enqueue_script en linea functions.php como esto…

wp_enqueue_script( MD_THEME_NAME.'-bundle', MD_THEME_URI.'/assets/js/bundle.js', array('jquery'), NULL, true );

El patrón particular de argumentos puede depender de su tema. Deberías tratar de hacer tu wp_enqueue_script parecerse a uno existente.

Finalmente, agregué el elemento html necesario, como <div id="vueApp"></div> por ejemplo, en cualquier parte de la plantilla representada actualmente.

¡Espero que ayude!

¿Ha sido útil esta solución?