2016-11-30 72 views
9

編輯VUE V2,VUE路由器和科爾多瓦

所以,我只是發現了它與路由器的歷史模式是做的,如果我從router.js刪除'mode': 'history',一切再次工作!離開這裏,如果別人有同樣的問題,或者如果有人能夠提供解釋......

原始

我不能使用VUE V2與VUE路由器和科爾多瓦(即建設以cordova/www並從index.html文件中獲得了cordova的工作)。我曾經可以使用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

嘗試在'config/index.js'的構建塊中設置'assetsPublicPath:'./''。我有使用vue-router工作的Vue2 Cordova應用程序,所以它絕對有可能 – toast38coza

回答

3

你可能會從磁盤加載文件( 「文件://」)和瀏覽器歷史記錄從「file://」加載文件時,API pushstate不起作用。它在你從路由器中刪除「mode:history」時起作用,因爲它默認使用散列。

3

設置編譯:assetsPublicPath: 'file:///android_asset/www/'

0

添加<base href='./'>元素在您的index.html頭。在你的編譯配置index.js設置assetsPublicPath: ''