2016-11-30 61 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: ''