cordova - tutorial - vue router title

vue v2, vue-router y cordova

Question

EDITAR

Así que acabo de descubrir que tiene que ver con que el enrutador esté en modo historial, si elimino ''mode'': ''history'', desde router.js todo funciona de nuevo! Saliendo de aquí si otros tienen el mismo problema, o si alguien puede proporcionar una explicación ...

Original

No puedo usar vue v2 con vue-router y cordova (es decir, construir a cordova/www y hacer que cordova trabaje desde el archivo index.html). Solía ​​poder con vue y vue-router v1. También puedo hacerlo con vue v2 pero sin usar vue-router.

Para ser claros, la aplicación funciona cuando se usa npm run dev pero no cuando se abre el index.html creado.

Tengo la sensación de que esto tiene que ver con el enrutador que busca una ruta de / pero viendo index.html ?

Aquí hay un repositorio donde puedes reproducir el problema.

A continuación hay un código relevante:

main.js

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

/* eslint-disable no-new */
new Vue({
  el: ''#app'',
  router,
  // replace the content of <div id="app"></div> with App
  render: h => h(App)
})

app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
import Hello from ''./components/Hello''

export default {
  name: ''app'',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: ''Avenir'', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

/router/router.js

import Vue from ''vue''
import Router from ''vue-router''

Vue.use(Router)

import Hello from ''../components/Hello''

export default new Router({
  ''mode'': ''history'',
  scrollBehavior: () => ({ y: 0 }),
  ''routes'': [
    {
      ''path'': ''/'',
      ''component'': Hello
    }
  ]
})

config / index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require(''path'')

module.exports = {
  build: {
    env: require(''./prod.env''),
    index: path.resolve(__dirname, ''../../cordova/www/index.html''),
    assetsRoot: path.resolve(__dirname, ''../../cordova/www''),
    assetsSubDirectory: ''static'',
    assetsPublicPath: '''',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: [''js'', ''css'']
  },
  dev: {
    env: require(''./dev.env''),
    port: 8080,
    assetsSubDirectory: ''static'',
    assetsPublicPath: ''/'',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

Answer 1

Agregue el elemento <base href=''./''> En su cabeza index.html. En tu configuración config index.js establece assetsPublicPath: '''' .

Answer 2

Establecer build: assetsPublicPath: ''file:///android_asset/www/''

Answer 3

Probablemente esté cargando los archivos desde el disco ("archivo: //") y el historial pushstate de la API del historial del navegador no funciona cuando los archivos se cargan desde "archivo: //". Funciona cuando elimina "mode: history" del enrutador porque utiliza de forma predeterminada los hashes.

Answer 4

tienes que cambiar en index.js assetsPublicPath: ''/'' a assetsPublicPath: ''./''