VueJS 在外部托管时不起作用答案

【问题标题】：VueJS not working when hosted externallyVueJS 在外部托管时不起作用
【发布时间】：2017-07-25 14:03:06
【问题描述】：

我一直在用 VueJS 开发一个小应用程序，在使用本地网络服务器进行开发时，它似乎运行良好。但不知何故，当我将它部署到 Github 页面时，它根本不会加载。我也试过把它部署在自己的服务器上，也不管用。

Javascript 代码执行良好，但不知何故 Vue 代码不能。

Link to the website where I've deployed it

Github repository

【问题讨论】：

任何控制台错误？
不，您可以查看链接。什么都没有
我不确定这是否正确部署。它从 node_modules 中提供脚本，如果您使用的是 webpack，我希望将其捆绑？源列表中还有一个 webpack:// 源，我不希望在生产发布中使用它。
我可能需要考虑使用 Webpack 进行部署。但是，它仍然不能解决 Javascript 未执行的问题。还是谢谢。
它对我有用 - 我可以切换标签，我可以看到 test 登录到控制台。我想你已经解决了这个问题 :) 如果你关闭你的问题。

标签： javascript html typescript vue.js

【解决方案1】：

如果您使用默认的 vuejs/vue-router 设置并发布到子文件夹，在您的情况下：http://example.com/folder/，vue-router 可以选择修改 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'
})

【讨论】：

【解决方案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: "/" }
]

【讨论】：