vue v2, Vue-Router i Cordova

Question

EDIT

Więc po prostu okazało się, że ma do czynienia ze router jest w trybie historii, jeśli usunąć 'mode': 'history', z router.js wszystko znowu działa! Pozostawienie tutaj, jeśli inni mają ten sam problem, czy ktoś może złożyć wyjaśnienie ...

oryginalny

nie jestem w stanie wykorzystać vue vue-v2 z routerem i Cordova (tj budynek cordova/www i mając cordova pracę z pliku index.html). Byłem w stanie z vue i vue-routerem v1. Mogę też z vue v2, ale bez używania vue-routera.

Dla jasności, aplikacja działa przy użyciu npm run dev po prostu nie podczas otwierania zbudowanego index.html.

Mam wrażenie, że ma to związek z routerem szukającym ścieżki /, ale widząc index.html?

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

Poniżej znajdują się odpowiedni kod:

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

Pewnie ładuje pliki z dysku ("file: //") i historii przeglądarki API pushstate nie działa, gdy pliki są ładowane z "file: //". Działa po usunięciu "mode: history" z routera, ponieważ domyślnie używa on skrótów.

Answer 2

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

Answer 3

Dodaj <base href='./'> elementu w głowie index.html. W konfiguracji kompilacji index.js zestaw assetsPublicPath: ''.