vue2.x 3.x histroy模式打包后 nginx 访问 404问题解决

最新推荐文章于 2024-04-11 21:14:07 发布

优秀的秃顶美男子

最新推荐文章于 2024-04-11 21:14:07 发布

阅读量175

点赞数

分类专栏： vue 前端文章标签： vue nginx java

本文链接：https://blog.csdn.net/lyl815616/article/details/115964186

版权

vue 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js应用中，从2.0到3.0版本切换路由模式为`history`模式时的配置步骤，并展示了如何配置Nginx以避免404错误。主要涉及Vue Router的`mode: 'history'`配置和Nginx的`try_files`指令来正确处理单页应用的路由。

摘要由CSDN通过智能技术生成

我这边是由于 histroy模式导致的
官方文档

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

#2.0代码
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import pay from '@/pages/pay'
import order from '@/pages/order'
import heiheihei from '@/pages/heiheihei'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/order',
      name: 'order',
      component: order
    },
    {
      path: '/pay',
      name: 'pay',
      component: pay
    },
    {
      path: '/hello',
      name: 'hello',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'heiheihei',
      component: heiheihei
    },
  ]
})

3.0代码
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        redirect: "index"
    },
    // {
    //     path: "/login",
    //     name: "login",
    //     component: resolve => require(["../views/login/Login.vue"], resolve)
    // },
    // {
    //     path: "/index",
    //     name: "index",
    //     component: resolve => require(["../views/index.vue"], resolve)
    // },
    {
        path: '/order',
        name: 'order',
        component: resolve => require(["../views/order.vue"], resolve)
      },
      {
        path: '/pay',
        name: 'pay',
        component: resolve => require(["../views/pay.vue"], resolve)
      },
      {
        path: '/index',
        name: 'index',
        component: resolve => require(["../views/heiheihei.vue"], resolve)
      },
    // {
    //     path: "/index",
    //     name: "index",
    //     component: resolve => require(["../views/index/Index.vue"], resolve),
    //     children: [{
    //             path: "/index/RoleSet", //角色设置
    //             name: "/RoleSet",
    //             component: resolve =>
    //                 require(["../views/authority/RoleSet.vue"], resolve)
    //         },
    //         {
    //             path: "/index/UserSet", //用户管理
    //             name: "/UserSet",
    //             component: resolve =>
    //                 require(["../views/authority/UserList.vue"], resolve)
    //         },
    //         {
    //             path: "/index/Map", //大屏展示
    //             name: "/Map",
    //             component: resolve =>
    //                 require(["../views/bigScreen/Map.vue"], resolve)
    //         },
    //         {
    //             path: "/index/Empty", //大屏展示
    //             name: "/Empty",
    //             component: resolve =>
    //                 require(["../views/bigScreen/Empty.vue"], resolve)
    //         }

    //     ]
    // }
];

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

export default router

nginx 目录

D:\java\nginx-1.12.2\conf

配置文件（直接丢给你们。。记得root 后面指向dist目录）

#默认的
 location / {
            root   html;
            index  index.html index.htm;
        }

#我的
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;



    server {
        listen       8080;
        server_name  localhost;

        location / {
            root   C:\Users\32783\Downloads\Compressed\aliyunhuakuai-vue\dist;
            index  index.html index.htm;
            #vue 路由 问题404 加下面一行代码 
            try_files $uri $uri/ /index.html;

        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}