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

相关文章
|
2天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
15天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
15天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
20天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
5天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
15天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
JavaScript 前端开发 数据库
前端之Vue配置
为了便于学习,本篇博客将会在评论区抽出一位幸运观众送出Vue.js全家桶一本书。书籍介绍请看文末。
157 0
前端之Vue配置
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
4天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
4天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。