若依VUE前端打包，nginx非根目录404解决

97牛肉面

已于 2022-01-22 17:20:00 修改

阅读量5.7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端小技巧 centos7 文章标签： vue.js nginx 前端

于 2022-01-18 16:36:41 首次发布

本文链接：https://blog.csdn.net/itjavaee/article/details/122562808

centos7 同时被 2 个专栏收录

11 篇文章

订阅专栏

前端小技巧

2 篇文章

订阅专栏

源码修改部分

1.退出登录（不然退出的时候会404）：Navbar.vue：112行

this.$store.dispatch('LogOut').then(() => {
    // 退出登录问题
    // location.href = '/index'
    this.$router.push(`/login?redirect=${this.$route.fullPath}`)
})

2.路由部分（不然【点击/刷新】菜单的时候会404）router/index.vue:168行

// nginx 非根目录需要加base，不然到时候路由进不去
export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  base: "你自己的目录名",
  routes: constantRoutes
})

3.vue配置文件部分 vue.config.js：21行

 publicPath: process.env.NODE_ENV === "production" ? "/你自己的目录名" : "/",

4.重新登录 request.js:91行

store.dispatch('LogOut').then(() => {
            // 如果是登录页面不需要重新加载
            if (window.location.hash.indexOf("#/login") !== 0) {
              // location.href = '/index';
              this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            }
          })

nginx配置部分

location /目录名 {
            alias  /home/service/nginx/html/目录名;
		    try_files $uri $uri/ /目录名/index.html;
            index index.html index.htm;
        }