发布spring cloud + vue项目
Posted 心飞翔<
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了发布spring cloud + vue项目相关的知识，希望对你有一定的参考价值。
服务器部署结构
1、服务器访问直接访问nginx
2、静态资源访问， nginx读取本地文件夹
3、API接口路由， nginx把以api开头的访问都路由到业务逻辑服务器。
nginx配置
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 静态资源位置 (这里的dist文件夹，即vue打包的默认文件名）
location / {
root c:/nginx/dist;
index index.html index.htm;
}
# 业务逻辑路由到真实服务器
location /api {
proxy_pass http://192.168.0.161:40001;
}
# .....
} Vue资源打包
axios 跨域访问问题
跨域问题分两种情况， 分别是开发者模式与生产环境跨域访问。
所谓开发者模式是指， 直接用npm run dev 运行vue程序， 包含了各种调试信息。
生产者环境是指， 通过npm run build把vue项目程序进行打包， 生成一个干净的发布内容。
1、在进行跨域访问时， 我们用axios进行访问服务器如下
this.$axios.post(process.env.API_HOST + '/api/app/download', {id : id}).then((result) => {
console.log(result)
}).catch((err) => {
console.log(err);
});这里POST的路径为process.env.API_HOST + ‘/api/app/download‘的绝对路径。
2、在开发者模型式下的配置
在config/dev.env.js文件中，添加如下内容
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'""'
})在config/index.js文件中，添加路由表proxyTable
module.exports = {
dev: {
// .....这里省略
proxyTable: {
'/api': {
target: "http://localhost:40001", // 这里需要访问的跨域服务器地址
changeOrigin: true
}
},
//....这里省略
}
}这样开者模式下的配置就完成了
3、生产环境下的配置
在config/prod.env.js文件中，添加如下内容
module.exports = {
NODE_ENV: '"production"',
API_HOST:' "http://localhost" '
}API_HOST就是指定需要跨域访问的服务器。
然后，在config/index.js文件中， 添加和编辑打包配置信息, 找到build字段，添加如下内容
build: {
env: require('./prod.env'),
assetsPublicPath: './',
productionSourceMap: false,
...
}这样就可以使用npm run build进行打包vue项目。默认输出到../dist这个位置。 前面的nginx静态资就是这个文件夹内容。
Spring Cloud打包
1、打包 jar文件包
在pom.xml文件中，指定打包类型, 即添加
<groupId>com.example</groupId>
<artifactId>svc-gateway</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>执行命令mvn build打包, 生产包，如上配置生成svc-gateway-0.0.1-SNAPSHOT.jar
2、运行程序
java -jar svc-gateway-0.0.1-SNAPSHOT.jar --server.port=40001
总结
访问请来了， 如果是http://localhost/api/xxxxx，就会被nginx路由到配置poxyPass对应的位置；否则会直接指定的location下面打找文件。
以上是关于发布spring cloud + vue项目的主要内容，如果未能解决你的问题，请参考以下文章
java版工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离 功能清单
java版工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离 功能清单
SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二visual studio code开发前端项目）
基于Spring cloud + vue 的前后端分离的社团管理系统，数据库采用MYSQL，前端使用 VUE + element