2016-11-30 1 views
9

EDITвю v2, вю-маршрутизатор и Cordova

Так что я только что узнал, что он должен делать с маршрутизатором, находясь в режиме истории, если удалить 'mode': 'history', из router.js все снова работает! Оставив здесь, если другие имеют те же проблемы, или если кто-то может объяснить ...

Оригинал

Я не могу использовать VUE v2 с вю-маршрутизатором и Кордову (т.е. здания в cordova/www и работа с кордорой из файла index.html). Раньше я мог использовать vue и vue-router v1. Я также могу использовать vue v2, но без использования vue-router.

Чтобы быть ясным, приложение работает при использовании npm run dev только при открытии встроенного index.html.

У меня такое чувство, что это связано с маршрутизатором, ищущим путь /, но видящий 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 
    } 
    ] 
}) 

конфигурации/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

Попробуйте установить 'assetsPublicPath: './' 'в вашем блоке сборки в' config/index.js'. У меня есть приложения Vue2 Cordova с использованием vue-router, поэтому это определенно возможно – toast38coza

ответ

3

Вы, вероятно, загрузка файлов с диска ("файл: //") и историю браузера API pushstate не работает, когда файлы загружаются из файла «file: //». Он работает, когда вы удаляете «режим: история» с маршрутизатора, потому что он по умолчанию использует хеши.

3

Комплект сборки: assetsPublicPath: 'file:///android_asset/www/'

0

Добавить <base href='./'> элемент в вашей index.html голове. В вашей конфигурации конфигурации index.js комплект assetsPublicPath: ''.