2

Tengo un proyecto en Vue cli:

introducir la descripción de la imagen aquí

Y decidí agregar Vuetify

Tengo un botón que me debería comprobar los datos del usuario y hacer el login. Pero no funciona en móviles, sólo en web. En mi navegador anda perfectamente, pero en teléfono no anda. Le doy al botón y no hace nada...

Pienso es que no soporta las nuevas funciones de fechas u otras características de ES6... Utilizo .then() con axios y no sé si pueda ser eso...

¿Cómo pasaría de ES6 a ES5?

Instalé Babel pero no logro transpilarlo, mi babel.config.js es:

module.exports = {
  presets: [
    '@vue/app'
  ]
}

¿Cómo le agrego el preset es ES5 para que pueda transpilarlo?

También hice uso de vue-cli-service build --modern para como dice en la pagina oficial me haga dos versiones, uno para navegadores antiguos y otro no. Pero igual :(

** Axios lo cargo como librería externa ya que al usar NMP me dice que axios es undefined, no sé por qué....

Aquí mi package.json:

{
  "name": "application",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.17",
    "vue-google-oauth2": "^1.2.0",
    "vue-recaptcha": "^1.1.1",
    "vuetify": "^1.3.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.6.1",
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.5.17",
    "vuetify-loader": "^1.0.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
8
  • Pero.. el cli de vue hace todo esto automaticamente y solo. transpilar, meter axios, todo solo. No se porque estas haciendo todo a mano. Tal vez deberias usar el CLI para inicializar el proyecto y solo copiar tus componentes?
    – gbianchi
    Commented el 20 dic. 2018 a las 14:29
  • Vue CLI no mete axios, y no transpila a ES5... Me meto en el app.js que genera al compilar y sigo viendo funciones de flecha
    – Jonathan
    Commented el 20 dic. 2018 a las 14:34
  • lo de axios tenes razón.. (mala mia ahi, agrega tantas cosas que me olvide que axios no). lo otro no se que decirte.. nunca tuve problemas con eso. tu navegador no tira errores al ejecutar el codigo no? en la consola?
    – gbianchi
    Commented el 20 dic. 2018 a las 14:44
  • podrias mostrar tu package.json a ver si tiene algo raro ahi? lo de axios me extraña mucho...
    – gbianchi
    Commented el 20 dic. 2018 a las 14:48
  • Lo de axios lo estoy resolviendo, es que no hice el import axios from 'axios', y bueno actualizo para el package.json
    – Jonathan
    Commented el 20 dic. 2018 a las 14:51

1 respuesta 1

3

La solución estuvo en seguir la guia de Vuetify para navegadores antiguos

Permitiéndome pasar funciones de flecha a funciones normales.

() => { ... } > function(){ ... }

En cuanto a lo de axios, tuve que importar la librería y declararla global...

import axios from 'axios';
window.axios = axios;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.