后端打包启动
1、pom.xml添加依赖
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork> <!-- 如果没有该配置,devtools不会生效 -->
</configuration>
</plugin>
</plugins>
</build>
2、mvn clean package -Dmaven.test.ship=true 跳过测试直接打包生成的jar
3、简单运行
java -jar xxx.jar --其他参数
vue之打包部署
1、在vue项目之下npm install之后是OK的,工程根目录下:vue.config.js的部分配置
const port = process.env.port || process.env.npm_config_port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
// assetsDir: 'static',
assetsDir: '',
// 是否开启eslint保存检测,有效值:ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
2、npm run build或者npm run build:prod,后面的是自己配置,参考nginx的下面红色初配置一致
3、自动生成dist,如果我们配置vue.config.js的 assetsDir: 'static',这里css/fonts/img/js会在它文件夹里面,index.html里面会在路径上自动添加上static的
第一种:nginx来部署
1、下载安装,把html文件夹里面的全部替换,这个时候启动nginx访问:localhost会自动到项目首页,但是刷新会404,
2、继续修改nginx配置conf/nginx.conf
添加try_files $uri $uri/ /index.html;
location / {
root html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
如果我们的项目添加了自定义VUE_APP_BASE_API = '/prod-api'
需要再添加location的兼容
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
3、再次进来,刷新是OK了