vue-部署教程_vue怎么部署别人的

vue部署

项目结构

使用NGINX部署

vue-history模式

router配置

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' 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

vue.config.js文件

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,
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

nginx配置

nginx.conf

 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;
     }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用SpringBoot部署

可以将前后台放一起部署

vue-hash模式

router配置

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' 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

vue.config.js文件

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,
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

SpringBoot配置

项目结构如下：

pom.xml

引入以下依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
1
2
3
4
5
6
7
8

application.yml

server:
  port: 8888
  url: localhost
spring:
  mvc:
    static-path-pattern: static/**
    async:
      request-timeout: 200000
1
2
3
4
5
6
7
8

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