如何在服务器上以 SPA 模式正确部署 Nuxt.js？答案

【问题标题】：How to deploy Nuxt.js in SPA mode on server properly?如何在服务器上以 SPA 模式正确部署 Nuxt.js？
【发布时间】：2019-08-21 20:31:56
【问题描述】：

我在我的项目中以 SPA 模式 使用 Nuxt.js。但我无法在我的服务器（Apache）中正确部署它。有人有过这种经历吗？

我认为问题在于 URL 中的斜杠试图在我的 .htaccess 中设置 DirectorySlash Off，但它只是不起作用。也试过了

也无济于事：

DirectorySlash Off

#removing trailing slash    
RewriteCond %{THE_REQUEST_FILENAME}  /(.*)/( |$|?)
RewriteRule ^(.*)/$ $1 [R=301,L]

# internally add the slash back
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/$
RewriteRule ^(.*)$ /$1/ [L]

我的项目现在在http://4dea.ru/works/TEST/spc/。如果您按下按钮（在背景为船上男子图片的部分），您将转到http://4dea.ru/works/TEST/spc/morskie-konstrukcii，一切正常。但是如果刷新页面，就会丢失一些图片（例如在标题中）。

在本地服务器 (Node.js) 上一切正常。

【问题讨论】：

标签： javascript apache .htaccess vue.js nuxt.js

【解决方案1】：

想出了两种方法来做到这一点： 1. 使用href="/image.png" 代替href="image.png"，因此图像的路径将是绝对的，并且可以从每个页面访问。但是，如果应用程序不在根目录中（如我的情况），则此选项不起作用。 2.通过href="@/assets/image.png"从assets文件夹加载图片。对于样式和动态路径，可以使用:style="{backgroundImage: ``url('${require('@/assets/boat.jpg')}')``}"。

希望对你有帮助^^

【讨论】：