Question

我在ubuntu（apache2服务器）上部署了vue cli项目更改vue路由器模式后，除索引外，所有页面在重新加载时均显示404页。

我将.htaccess添加到了index.html所在的/ dist路径，但是仍然无法正常工作我不知道还有什么办法解决这个问题。有人知道吗？

这是我的项目dist文件夹

Sub SetUpSummarySheet()

    Dim ws As Worksheet

    Set ws = Worksheets("Summary")

    InsertWithHeaderAndFormula ws, "E", "Net Return", "=RC[-2]-RC[-3]"
    InsertWithHeaderAndFormula ws, "G", "Blah", "=RC[-1]"
    'etc for other solumns

End Sub

'Insert a column in sheet ws, add a header hdr and a formula sForm to extend
'   as far down as there are values in ColA
Sub InsertWithHeaderAndFormula(ws As Worksheet, colLetter As String, _
                                hdr As String, sForm As String)

    Dim lastRow As Long
    lastRow = ws.Cells(ws.Rows.Count, "A").End(xlUp).Row
    ws.Cells(1, colLetter).EntireColumn.Insert Shift:=xlToRight
    ws.Cells(3, colLetter).Value = hdr
    ws.Cells(4, colLetter).Resize(lastRow - 3, 1).FormulaR1C1 = sForm

End Sub

.htaccess中的dist

/home/admin/web/mali-nali.com/public_html/dist

这是htacccess.madewithlove。正在调试信息

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

所有不存在的页面的最后一条路线

RewriteEngine On    RewriteEngine was now turned on
2   RewriteBase /   Using / as the base for the rewrites.
3   RewriteRule ^index\.html$ - [L] This rule was not met.
4   RewriteCond %{REQUEST_FILENAME} !-f This condition was met.
5   RewriteCond %{REQUEST_FILENAME} !-d This condition was met.
6   RewriteRule . /index.html [L]   The new url is https://mali-nali.com/index.html
The tests are stopped because of the L in your RewriteRule options.

Answer 1

来自https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

注意：以下示例假定您正在从根文件夹提供服务。如果部署到子文件夹，则应使用Vue CLI的publicPath选项以及路由器的相关基础属性。

似乎正是您所缺少的。

Answer 2

在Vue项目的根目录中，添加一个名为vue.config.js的文件，其代码如下。

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '/mali-nali.com/' : '/'
}

然后仍然在Vue项目的根目录中添加一个名为404.html的文件，其代码如下。

<!DOCTYPE html>
 <html>
  <head>
    <script>         
        sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/mali-nali.com/'">
  </head>
 </html>

然后将您创建的404.html文件复制到/ dist文件夹中。希望对您有所帮助。

在vue路由器历史记录模式下重新加载页面时出现404错误

2 个答案: