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

Posted 2023-01-11

[我在托管平台上部署了Vue应用，我知道我是否可以提供服务

"www.mydomain.com/about"并按Enter，我得到404错误页面。我部署了错误的东西吗？

npm run build

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

Text

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

为什么会这样？

答案

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

Check this link

另一答案

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

Apache

<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上的完整文档。