Question

我有一个vuejs简单项目并将其部署在我的托管上。

首先是我使用以下方式在生产模式下构建它：

 npm run build

然后我有一个www.sample.com/vue-project/的网址，我把我的vuejs项目的生产版本放在那里。当我访问链接时，一切都表现良好。当我点击菜单添加博客时，它会将URL更改为此链接www.sample.com/vue-project/add并加载正确的组件。但是，当我在页面上按f5时会显示404 error。但不知道为什么。当我访问此链接https://epm.sg/vue-project/#/add时，它为我提供了正确的组件。但正如您在Routes Option上看到的那样，我将其放在history mode上。

这是我的代码。

main.js

import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'

Vue.use(VueResource);
Vue.use(VueRouter);

Vue.url.options.root = 'https://sample-proj.firebaseio.com/';

const router = new VueRouter({
  base:'/vue-project/',
  routes:Routes,
  mode: 'history',
});

routes.js

import showBlogs from './components/showBlogs.vue';
import addBlog from './components/addBlog.vue';
import singleBlog from './components/singleBlog.vue';

export default [
  {
    path: "/",
    component: showBlogs
  },
  {
    path: "/add",
    component: addBlog
  },
  {
    path: "/blog/:id",
    component: singleBlog
  }
];

navbar.vue

<template>
  <nav>
      <ul>
        <li><router-link to="/" exact>Blog</router-link></li>
        <li><router-link to="/add" exact>Add New Blog</router-link></li>
      </ul>
  </nav>
</template>
<script>
export default {

}
</script>

提前感谢。

VUE JS相对路径问题

0 个答案: