nginx中部署前端war,前端打包,后端打成jar包运行

1,下载npm

npm install 

2,前端代码编译

npm run build

注意:前端打包报TS类型错误
打包执行的是npm run build命令,具体执行可查看package.json中配置项。

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },

可以发现在build时,执行了vue-tsc --noEmit && vite build,其中

vue-tsc:Vue 官方提供的命令,用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查
--noEmit:TS 编译器的选项,使用 --noEmit 选项后,编译器仅执行类型检查,而不会生成任何实际的编译输出

在打包的时候编译器执行了TS类型检查,所以才报了一堆错,类型错误最终不会影响项目的正常运行
解决
根据上面分析,package.json中的"scripts"修改如下:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

另外项目通常在编译时候,也会对我们引入的一些依赖包进行类型校验,我们并不需要这个操作,所以可以在tsconfig.json中设置如下:

 "compilerOptions": {
    "skipLibCheck": true
  },

设置后编译器不会检查库文件中的类型定义是否正确,也不会对库文件的使用进行类型检查。

3,前端打包war:在dist目录下执行

jar -cvf hsa-cep-ebc-query-ui.war *

4,nginx运行前端

项目是前后端分离:前端用vue开发,后端用的是springboot开发

会产生跨域问题,故在前端里用了代理

1.前端项目是用vue开发:
  1.1打包:终端 vscode快捷键:crtl+~  然后npm run build
  1.2:生成一个dist文件:复制到nginx下的html中。
  1.3:更改nginx中 conf->nginx.conf
   1.4.nginx -s quit强制停止,然后在start nginx.exe 进行启动,有时nginx中重启没用,访问 10.10.5.88:8085 就ok了。

5,记录当把项目放在其他window系统下产生问题

1. listen 8085; 例如这样子的,listen 和8085 中间最好是tab而不是空格,有时有问题,有时没问题。

2.(问题)\dist/index.html" failed (123: The filename, directory name, or volume label syntax is incorrect), 当访问的时候报500

该次解决:将 root  D:\program\nginx-1.16.1\html\dist 换成 root  D:/program/nginx-1.16.1/html/dist;

3.另一台电脑上配置:

server {
listen 8089;
server_name 192.16464.164.6;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root D:/program/nginx-1.16.1/html/dist;
try_files $uri $uri/ /index.html;
}

location /api { #4.当请求跨域时配置端口转发
proxy_pass http://192.164648.1.646:8211/; #5.转发地址
}

   

停止,再启动,访问。ok

如何打成jar包请看:https://www.cnblogs.com/yiyezhiqiuwuchen/p/12191113.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值