vue v2, vue-Router und cordova

Question

EDIT

Also nur fand ich heraus, dass es mit dem Router in der Geschichte-Modus ist, zu tun hat, wenn ich 'mode': 'history', von router.js entfernen funktioniert alles wieder! Weggehen hier, wenn andere das gleiche Problem haben, oder wenn jemand eine Erklärung liefern ...

Original-

Ich bin nicht in der Lage vue v2 mit vue-Router und cordova (dh den Aufbau zu cordova/www verwenden und Cordova arbeiten aus der index.html Datei). Früher konnte ich mit vue und vue-router v1. Ich kann auch mit vue v2, aber ohne Vue-Router.

Um klar zu sein, funktioniert die App bei der Verwendung npm run dev einfach nicht beim Öffnen der gebauten index.html.

Ich habe das Gefühl, das hat mit dem Router auf der Suche nach einem Pfad von / zu tun, aber index.html zu sehen?

Here's a repo where you can reproduce the problem.

Nachfolgend finden Sie einige relevante Code:

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

Sie sind wahrscheinlich die Dateien von der Festplatte zu laden ("file: //") und der Browser-History API-Pushstate funktioniert nicht, wenn Dateien von "file: //" geladen werden. Es funktioniert, wenn Sie "mode: history" vom Router entfernen, da standardmäßig Hashwerte verwendet werden.

Answer 2

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

Answer 3

hinzufügen <base href='./'> Element in Ihrem index.html Kopf. In Ihrer Build-Konfiguration index.js Set assetsPublicPath: ''.