springboot+vue在linux服务器部署
一.一块部署[springboot打jar包]
linux服务器环境:jdk mysql
1.把vue的项目用npm run build命令打包,打包完成后,会生成dist文件夹.
2.打开springboot项目,在src/resources目录下新建一个static文件夹,将dist文件夹中的所有文件放到static下.
3.选中springboot项目,右击,选择Run As 最后一个Run Configurations,点击New_configuration,完成打包,双击左侧Maven Build,出来New_configuration,右侧Goals改为package,点击Run As等待完成打包,console出现"BUILD SUCCESS"字样,为打包成功.在target文件夹下,找到xxx.jar包,放到服务器上.
4.用nohup java -jar xxx.jar[项目打成的jar名,最好是输全路径] &命令启动.
二.分开部署(一)
linux环境jdk mysql tomcat nginx vue
修改vue项目中config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
1.把assetsPublicPath所对应的值，都改为./
2.proxyTable: {}
注:本机地址改为服务器的地址
1.把vue的项目用npm run build命令打包,打包完成后,会生成dist文件夹.
2.在tomcat的webapps下新建vue的文件夹,将dist文件夹中的所有文件放入vue中.
3.选中springboot项目,右击,选择Run As 最后一个Run Configurations,点击New_configuration,完成打包,双击左侧Maven Build,出来New_configuration,右侧Goals改为package,点击Run As等待完成打包,console出现"BUILD SUCCESS"字样,为打包成功.在target文件夹下,找到xxx.jar包,放到服务器上.
4.用nohup java -jar xxx.jar[项目打成的jar名,最好是输全路径] &命令启动.
5.用nginx配置一个vue的转发路径.
二.分开部署(二)
linux环境jdk mysql tomcat nginx vue
修改vue项目中config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}1.把assetsPublicPath所对应的值，都改为./
2.proxyTable: {}
注:本机地址改为服务器的地址
在项目中使用vue-router的时候，就需要给src/router/index.js添点东西，如下面：
export default new Router({
mode : 'history',
base: '/vue/', //添加的地方
...
}1.把vue的项目用npm run build命令打包,打包完成后,会生成dist文件夹.
2.在tomcat的webapps下新建vue的文件夹,将dist文件夹中的所有文件放入vue中.
3.选中springboot项目,右击,选择Run As 最后一个Run Configurations,点击New_configuration,完成打包,双击左侧Maven Build,出来New_configuration,右侧Goals改为package,点击Run As等待完成打包,console出现"BUILD SUCCESS"字样,为打包成功.在target文件夹下,找到xxx.jar包,放到服务器上.
4.用nohup java -jar xxx.jar[项目打成的jar名,最好是输全路径] &命令启动.
5.用nginx配置前端vue和base两个转发路径.
停止nginx命令：cd /opt/nginx/sbin/ 然后 ./nginx -s stop
启动nginx命令：cd /opt/nginx/sbin/ 然后 ./nginx -c /opt/nginx/nginx-1.8.0/nginx.conf
nginx配置文件路径： /opt/nginx/nginx-1.8.0/nginx.conf
nginx.conf 文件:
worker_processes 1;
events{
worker_connections 1024;
}
http {
server {
listen 81;
server_name 114.116.80.129;
location /vue {
proxy_pass http://127.0.0.1:8083;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
location /api/ {
proxy_pass http://127.0.0.1:8080/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
location / {
proxy_pass http://127.0.0.1:8080;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
# location / {
#
# root /opt/nginx/vue;
#
# try_files $uri $uri/ @router;
#
# index index.html;
#
# }
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
}