原创

vue使用history模式踩坑

温馨提示:
本文最后更新于 2022年09月14日,已超过 374 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

vue-router使用history模式需要注意几点

开发环境需要配置一下vue.config.js的

publicPath: '/', //这里需要注意

devServer: {
  historyApiFallback: true // 这里需要设置为true
},

还有就是index.html里面引用js和css如果是cdn形式引入的话就没影响,但是如果是引用本地的资源就需要更改一下引用路径

接下来就可以到router.js里面更改mode为history了

const router = new VueRouter({
    mode: 'history',
    routes,
});

生产环境需要配置服务器

appahe的是

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

nginx的

location / {
  try_files $uri $uri/ /index.html;
}
需要注意的是这样配置的话一旦用户输入的路径没有对应的路由,页面会出现空白的情况,所以如果有需要的话可以准备相应的404和500的页面
正文到此结束