zoukankan      html  css  js  c++  java
  • vue history模式下 刷新或路由跳转404

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。并且url上会出现我们讨厌的‘#’。

    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    const router = new VueRouter({
     base: '你的项目名', mode: 'history', routes: [...] })

    这里附上vue router 关于history模式的官方文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html

    解决方法:
    因为nginx配置为一个端口下配置多个项目:

    server {
    	listen       8801;
    	server_xxx;
    	root 存放打包后项目的根目录;
    	
    	location /你的项目名/ {
    		root 存放打包后项目的根目录;
    		index  index.html index.htm;
    		try_files $uri $uri/ /你的项目名/index.html;
    	}
    }

      

    这种情况下vue项目的static静态文件路径还出现404问题,这时候我们在config/index中build

        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/你的项目名/',


    再试试之前出现的问题,直接进入某个路由不会出现404,刷新路由不会出现404,项目静态文件也能正常访问了。
    (试了好久终于可以了,虽然不知道有没有其他问题)
    我屮艸芔茻,啦啦啦!

  • 相关阅读:
    Redux 学习总结
    ECMAScript 6 学习总结
    Bootstrap 前端UI框架
    React.js 学习总结
    html 之 <meta> 标签之http-equiv
    Leetcode Excel Sheet Column Number (C++) && Excel Sheet Column Title ( Python)
    490
    414
    494
    458
  • 原文地址:https://www.cnblogs.com/guors/p/14270475.html
Copyright © 2011-2022 走看看