如何使用历史记录模式路由到更长的 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>
最佳答案
来自错误:
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
之前添加的 /
。
关于url - vuejs 历史模式路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49984384/