electron + vue2.0 + webpack + vue-router 打包项目后,路由无效?

electron + vue2.0 + webpack + vue-router 打包项目后,以index.html/login 这样的形式访问不了路由,在开发模式下,用http:localhost:8080/login这样是可以的。我也找过一些资料,问过一些群的朋友,说是要建立web服务,但是electron下建web服务也不知道怎么搞,求大神指导下。。感激不尽!!

electron 入口代码:

mainWindow.loadURL(url.format({
    /*开发环境
    pathname: path.join('localhost:8080'),
    protocol: 'http:',
    slashes: true
    */

    /*生产环境*/
    pathname: path.join(__dirname, '/xpg/index.html'),
    protocol: 'file:',
    slashes: true
  }))

main.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import 'ionicons/css/ionicons.min.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
import Login from './components/login.vue'
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(ElementUI)

const routes = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/login',
      component: Login
    }
  ]
})

const app = new Vue({
  router: routes,
  render: h => h(App)
}).$mount('#app')

项目结构图
图片描述


webpack打包生成的静态资源,应该怎么访问路由呢?

阅读 16.1k
5 个回答

electron下,请选用hash模式:

const routes = new VueRouter({
  mode: 'hash',
  base: __dirname,
  routes: [
    {
      path: '/login',
      component: Login
    }
  ]
})

history模式设置会比较麻烦(事实上,我压根没想好怎么弄)。

路由改成hash试试

新手上路,请多包涵

在页面中使用<router-link to="/login">登录</router-link>生成连接;
实际上生成的标签是<a href="#/login" class="" data-v-922f74f2="">登录</a>
因为这里使用的是vue-router
请参考文档链接描述

有electron-vue 这个构建了以后vue相关的结构都搭好了
参考这个 详见

新手上路,请多包涵

以上的你的解决了么,我也遇到了这问题

推荐问题
宣传栏