Nginx部署VUE前端页面(图文解说详细版)

简介: Nginx部署VUE前端页面(图文解说详细版)

如果你还没有安装Nginx,请参考:

Linux安装Nginx


第一步,打包前端文件


npm run build


0deaa634fee840f5bb84cb7a8946c9c2.png


第二步,上传打包好的文件到Nginx的安装目录下的html

这里是使用的nginx的默认配置,如果需要自定义存放位置的话,可以去conf文件下的Nginx.conf去配置


7bc561a6e5e44078b555e6bc86d4fd83.png


f6d2fff305b14b659d34ad6c762e9d38.png


第三步,自定义配置


7b9e8d629aff4ae18026e00a4a976862.png


f59b12a4a744475c90fc8cb7d2ffab49.png


第四步,配置Nginx代理


742176e9bb6c4fed9364500e03ac549f.png

这里的前端对应的是这样的:


8efa7f3149e643829b1e01506c38d05d.png

后端对应:

server.context-path 起到在ngnix分发中的作用

这个点非常重要!!

0aaa6a8e44074057926ecff8777dd69f.png


这里配置了我四个小时

9086db23aa4d44469d938dd12ade2704.png

在网上找到的全是乱七八糟的配置,哎。。。。。

第五步,启动Nginx


bc3881ba2f4e4b6c8ec02451495d515f.png

或者重启Nginx:

./nginx -s reload

第六步,访问你服务器的地址

e7118cc7881f458d9a71f648ddda3393.png

相关文章
|
4天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
19 4
|
7天前
|
前端开发 应用服务中间件
前端项目部署问题总结
【7月更文挑战第13天】
11 1
|
9天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
50 0
|
9天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】 前端vue2 全局水印效果
【vue】 前端vue2 全局水印效果
9 0
|
9天前
|
JavaScript 前端开发 数据安全/隐私保护
vue 前端 邮箱、密码、手机号码等输入验证规则
vue 前端 邮箱、密码、手机号码等输入验证规则
23 0
|
9天前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
12 0
|
9天前
|
JavaScript 前端开发
【vue】 接口返回的preview是张图片,前端如何渲染
【vue】 接口返回的preview是张图片,前端如何渲染
10 0
|
23天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
23天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
36 2