如何部署使用历史模式进行路由的生产 VueJS 项目？答案

【问题标题】：How do I deploy a VueJS project for production which is using the history mode for routing?如何部署使用历史模式进行路由的生产 VueJS 项目？
【发布时间】：2019-08-07 16:09:55
【问题描述】：

我创建了一个 vueJS 网站，并使用了历史模式进行路由，以便摆脱 URL 中显示的默认路由模式中的 #。但是，当我在

之后将我的项目部署到服务器时

npm 运行构建

它运行良好，但是当我重新加载任何页面或在浏览器手册中键入 url 时，我得到了 404 错误。

我已使用历史模式进行路由。我正在使用firebase作为后端。我阅读了documentation 关于如何解决这个问题，但我不太明白。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
mode : 'history',
routes : [
{
path : '/',
name : 'dashboard',
component : 'Dahsboard',
}
]
})

【问题讨论】：

您需要告诉您的 Web 服务器为每个请求提供 index.html 文件。
您能否根据他们在网站上提供的文档告诉我如何做到这一点？

标签： firebase vue.js deployment configuration routing

【解决方案1】：

我没有足够的声誉在您问题下的评论部分回答，所以我在这里提供一个答案。

您可以找到告诉 Web 服务器为每个路由请求 here 提供 index.html 文件的代码。只需创建一个.htaccess 文件并将其上传到您的服务器。

在上面的示例中，如果您使用的是单文件组件，您还需要导入您的 Dahsboard-Component。

【讨论】：