Vue项目前端部署详细步骤(nginx方式)
更新时间：2023年09月18日 09:11:55 作者：小小菜菜程序员
Nginx(engine x)是一个高性能的HTTP和反向代理web服务器,是部署前端项目的首选,这篇文章主要给大家介绍了关于Vue项目前端部署(nginx方式)的相关资料,需要的朋友可以参考下
1. 准备好服务器，下载安装nginx并启动
随便在网上找一篇文章，下载安装之后，启动nginx
2. vue项目编译打包
在项目根目录下 运行npm run build 进行编译打包
打包完成之后，在项目根目录下会多一个dist目录
3. 将dist目录上传到服务器上
4. 配置nginx安装目录下的nginx.config文件
因为使用到nginx进行代理，所以vue.config.js里面的代理是不会生效的，我们使用nginx来配置反向代理,配置完成保存文件
server {
listen 3012; #访问端口
server_name localhost;
location / {
root /xx/xx/xx/dist; #前端dist包地址
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /ele/ {
proxy_set_header x-forwarded-for $remote_addr;
proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
}
charset utf-8;
}5. 重启nginx
使用service nginx restart 或则 nginx -s reload 进行nginx重启
6. 访问地址
地址为服务器地址，端口是nginx配置的访问端口，因为我配置的是3012，所以直接 ip:3012即可。如果首页有其他路由，可以使用ip:3012/router的方式，比如首页路由是/index 访问地址就是ip:3012/index
总结
到此这篇关于Vue项目前端部署(nginx方式)的文章就介绍到这了,更多相关Vue项目前端部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写。VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定。Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点。2023-01-01
在Web应用程序中,实现拖拽和排序功能是非常常见的需求,本文为大家介绍了如何使用Vue来实现一个简单但功能强大的拖拽与排序功能,感兴趣的小伙伴可以参考下2023-10-10
在Vuex使用dispatch和commit来调用mutations的区别详解
今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要给大家介绍的是vue2 vue3中使用Echarts的相关资料，下面文章 会详细介绍该内容，感兴趣的小伙伴不要错过哟2021-09-09
这篇文章主要介绍了Vuex 快速入门(简单易懂)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue实现父子组件传值其实不难问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue.js 3.x 中的响应式数据ref 与 reactive详解
ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据：ref 与 reactive,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Vue组件Draggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论