Saltar al contenido

¿Vue JS 2.0 no muestra nada?

Luego de de una larga selección de información resolvimos esta aprieto que suelen tener ciertos los lectores. Te regalamos la respuesta y deseamos resultarte de mucha apoyo.

Solución:

Solo para hacer la vida más fácil a las personas que buscan la respuesta:

import Vue from 'vue/dist/vue.js'
import App from './App.vue'

new Vue(
  el: '#app',
  render: h => h(App)
)

Del autor — Medios de compilación independientes 2.0 (compilador + tiempo de ejecución). La exportación predeterminada del paquete NPM será solo en tiempo de ejecución, porque si se instala desde NPM, es probable que precompile las plantillas con una herramienta de compilación.

Si está utilizando una herramienta de compilación como browserify o Webpack, lo más probable es que pueda usar componentes de un solo archivo para evitar tales errores (en los componentes de un solo archivo, las plantillas se compilan automáticamente para representar funciones mediante vueify). Definitivamente deberías tratar de evitar las plantillas en cualquier otro lugar. Consulte el foro y la documentación para obtener respuestas sobre cómo evitarlos.

Pero sé por experiencia propia que no siempre es fácil encontrar las plantillas en su proyecto que están causando el mensaje de error. Si tiene el mismo problema, como solución temporal, lo siguiente debería ayudar:

No debe importar ‘vue/dist/vue.js’ (consulte la documentación: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds why no)

En su lugar, debe manejar eso en la herramienta de compilación que está utilizando.

En mi caso, estoy usando browserify donde puedes usar aliasify para crear el alias. Agregue lo siguiente a su package.json Archivo:


  // ...
  "browser": 
    "vue": "vue/dist/vue.common.js"
  

para los usuarios de Webpack, parece que debe agregar lo siguiente a su configuración:

resolve: 
    alias: vue: 'vue/dist/vue.js'
,

Se puede encontrar más información en la documentación: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Para Vue 3.4.0 Puede agregar un nuevo archivo en el directorio raíz del proyecto llamado

vue.config.js y agregue lo siguiente en él.

module.exports = 
  runtimeCompiler: true

La próxima vez que inicie la aplicación podrá ver

Compilado con éxito en 204ms
20:46:46

App running at:

Comentarios y calificaciones

Si crees que te ha resultado de ayuda este post, nos gustaría que lo compartas con más programadores de esta forma contrubuyes a dar difusión a este contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *