2016-11-30 13 views
9

EDITVUE v2では、VUE-ルータとコルドバ

だから、私はちょうどそれは、ルータが履歴モードであることに関係していて見つけ、再び動作します!他の人が同じ問題を抱えている場合、または誰かが説明を提供できるかどうか、すなわちcordova/wwwに構築する(私はVUE-ルータとコルドバでVUE V2を使用することはできませんよ

オリジナル

...ここに残してindex.htmlファイルからcordovaを使用しています)。以前はvueとvue-router v1でできるようになりました。私はvue v2を使うこともできますが、vue-routerを使用することはできません。

明確にするには、index.htmlを開けないときは、npm run devを使用するとアプリが動作します。

これは、ルータが/のパスを探しているのに、index.htmlと表示されているような気がしますか?以下は

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

いくつかの関連するコードです:

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 
    } 
} 
+0

'config/index.js'のビルドブロックで' assetsPublicPath: './' 'を設定してみてください。私はvue-routerを使っているVue2 Cordovaアプリを持っているので、間違いなく可能です – toast38coza

答えて

3

おそらく、ディスクからファイルをロードしている( "ファイル://")とブラウザの履歴ファイルが "file://"から読み込まれると、API pushstateは機能しません。これは、デフォルトでハッシュを使用するため、ルータから「モード:履歴」を削除するときに機能します。

3

セットビルド:assetsPublicPath: 'file:///android_asset/www/'

0

は、あなたのindex.htmlの頭の中で<base href='./'>要素を追加します。ビルド設定でindex.jsassetsPublicPath: ''に設定します。

関連する問題