vuejs 历史模式路由

Question

如何使用历史模式路由到更长的 URL 路径？

示例：/catalog/[product-name]/p/[product-id]

打开历史记录模式后，网站一片空白。在我的 CSS 和 JS

上出现以下类型的错误

Refused to execute script from '{URL}/catalog/[product-name]/p/dist/build.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

路由器代码：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/catalog/my-product-name/p/MASN123U', name: 'product', component: product }
  ]
})

旁注：它在没有历史模式的情况下工作正常，只是 URL 读取

/#/catalog/[product-name]/p/[product-id]

Web.config 根据文档

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA Routes" stopProcessing="true">
                    <!-- match everything by default -->
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <!-- unless its a file -->
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <!-- or a directory -->
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <!-- or is under the /api directory -->
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                        <!-- list other routes or route prefixes here if you need to handle them server side -->
                    </conditions>
                    <!-- rewrite it to /index.html -->
                    <action type="Rewrite" url="/index.html" />
                </rule>`enter code here`
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Answer 1

来自错误：

Refused to execute script from '{URL}/catalog/[product-name]/p/dist/build.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

查看您的 HTML 文件中的某处，您可能有这样的脚本标记：

<script src="dist/build.js"></script>

当它的路径应该是绝对路径时，例如：

<script src="/dist/build.js"></script>

注意在 dist 之前添加的 /。

vuejs 历史模式路由

vuejs history mode routing

url

url-rewriting

vue.js

vue-router

vuejs2