vuejs历史模式路由

时间:2018-04-23 15:10:44

标签: url vue.js url-rewriting vuejs2 vue-router

如何使用历史记录模式路由到较长的URL路径?

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

该网站在历史模式启用时变为空白。 我的CSS和JS上有以下类型的错误

  

拒绝执行来自'{URL} / catalog / [product-name] /p/dist/build.js'的脚本,因为它的MIME类型   ('text / html')不可执行,严格的MIME类型检查是   启用。

路由器代码:

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>

1 个答案:

答案 0 :(得分:0)

从错误:

  

拒绝执行来自&#39; {URL} / catalog / [product-name] /p/dist/build.js'的脚本;因为它的MIME类型(&#39; text / html&#39;)不可执行,并且启用了严格的MIME类型检查。

查看HTML文件中的某个位置,您可能有一个脚本标记:

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

当它的路径应该是绝对的时,例如:

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

请注意/之前添加的dist