vue-部署教程

项目结构

router的index.js文件

// 路由相关
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/pages/login/login"

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
};

const routes = [
    {
        path:'',
        redirect:'/Login'
    },
    {
        path:'/Login',
        name:'Login',
        component:Login
    }
]


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

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'network': '@/network',
                'components': '@/components'
            }
        }
    },
    lintOnSave: false,
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/", //重要配置
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8081,
        https: false,
        hotOnly: false,
    }
}

 server {
     listen 8071 ;
     listen [::]:8071 ;
     server_name vue; # 这里是网站的域名
     location / {
       root D:/dist;# /vue/dist/; 打包后的dist目录
       try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
       index index.html index.htm;
      }
    # 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
     location @router {
      rewrite ^.*$ /index.html last;
     }
  }

可以将前后台放一起部署

router的index.js文件

// 路由相关
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/pages/login/login"

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
};

const routes = [
    {
        path:'',
        redirect:'/Login'
    },
    {
        path:'/Login',
        name:'Login',
        component:Login
    }
]


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

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'network': '@/network',
                'components': '@/components'
            }
        }
    },
    lintOnSave: false,
    publicPath:'./', //重要配置
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8081,
        https: false,
        hotOnly: false,
    }
}

将打包后的vue项目放入SpringBoot项目的static中

项目结构如下：

引入以下依赖

        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        

server:
  port: 8888
  url: localhost
spring:
  mvc:
    static-path-pattern: static/**
    async:
      request-timeout: 200000

访问地址：http://localhost:8888/static/dist/index.html