外部托管時VueJS不起作用

Question

我一直在用VueJS開發一個小應用程序，並且在使用本地Web服務器進行開發時似乎運行良好。 但是當我將它部署到Github頁面時，它根本無法加載。 我也曾嘗試將其部署在自己的服務器上，但這也不起作用。

Javascript代碼可以很好地執行，但是Vue代碼卻不能。

鏈接到我部署它的網站

Github倉庫

Answer 1

如果您使用默認的vuejs / vue-router設置並且要發布到子文件夾，則您的情況為： http://example.com/folder/ : http://example.com/folder/可以選擇修改base 。

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/components/Home'

Vue.use(Router)

const routes = [
 { path: '/', name: 'Home', component: Home }
]

export default new Router({
 routes,
 mode: 'history',
 base: '/folder'
})

Answer 2

我發現了問題，這與我的特定設置上的路由有關。

當Vue的路由器在服務器上定義了路由時，它將使用已給定的路由路徑。 我的問題是將Vue路由器與部署在文件夾中的應用程序一起使用。 因此，在您執行該應用程序時，在我的情況下，當前路徑將指向http://example.com/folder/，而您的路線則指向http://example.com/ 。

我通過定義一條備用路由解決了這個問題，如果另一條路由由於某種原因失敗了。

routes: [
    { path: '/', name: "CollectionMarker", component: CollectionMarker },
    { path: '/cars', name: "CarMarker", component: CarsComponent },
    // This is the path that you need to include, it will redirect when no route has been found
    { path: "*", redirect: "/" }
]