正确构建后如何部署 Vue App？答案

【问题标题】：How is Vue App deployed after build correctly?正确构建后如何部署 Vue App？
【发布时间】：2020-01-15 16:42:29
【问题描述】：

我在托管平台上部署了一个 Vue 应用程序，我知道如果我提供服务

"www.mydomain.com/about" 并回车，我得到 404 错误页面。我是否部署了错误的东西？

npm run build

注意：dist 文件夹是在构建后部署的

Text

但是当您删除/about 时，会提供真实页面，并且当您单击导航栏上的链接时，它会显示关于页面。但是当你刷新页面时，它会返回 404 错误。

为什么会这样？

【问题讨论】：

嗯，这是一些有趣的行为。你能提供你的路由器配置文件的副本吗？我预计延迟加载可能是罪魁祸首
其实我找到了你的路由器配置。试试这个。对于一页，我们将使用“关于”页面。将该组件导入您的路由器，然后在路由对象中，将组件从() => import("../views/About") 更改为直接指向该组件。重新部署并查看是否可以直接浏览到“关于”。
更多细节在这里：router.vuejs.org/guide/essentials/…，直接路由时进入404s。这意味着问题可能与历史模式路由相关，而不是延迟加载
就像@Tanner 说的可能是历史模式。你可以很容易地检查它但去 www.mydomain.com/#about 如果它的作品它的 100% 历史模式问题
@Tanner，你的建议没有用，还是一样...谢谢。欢迎任何其他建议。

标签： vue.js vuejs2 vue-router vue-cli

【解决方案1】：

您需要配置您的服务器，因为您正在使用服务器而不是 vue 解析路由（当您单击导航栏并转到 /about 时，您可以访问，因为您正在使用 vue 解析路由） .

Check this link

【讨论】：

你的建议肯定行得通，我怎么写在我的 vue.config 文件中
另一个问题是，当我将它托管在 firebase 上时，它可以正常工作，没问题...但是我托管它的那个平台，它无法正常工作

【解决方案2】：

你正在使用 Vue 路由器的历史模式。在这种情况下，对于任何适用于 vue 的页面 URL，您必须对 Web 服务器的配置进行一些更改。以下是 2 个最常见的配置设置。进行这些更改，重新启动您的网络服务器，您的问题将得到解决。

阿帕奇

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

https://router.vuejs.org/guide/essentials/history-mode.html 提供完整文档。

【讨论】：