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+ElementUI怎么处理超大表单实例讲解内容，以后需要的朋友可以跟着学习参考下。2021-11-11
vue3是一个流行的前端框架,vite是一个快速的构建工具,下面这篇文章主要给大家介绍了关于vue3+vite项目跨域配置踩坑实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue引入jquery实现平滑滚动到指定位置的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要介绍了vue中常见循环遍历指令的使用 v-for，包括v-for遍历数组，v-for遍历json对象,本文给大家介绍的非常详细，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue金融数字格式化(并保留小数) 数字滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了vue自定义指令三步如何实现数据拉取更新,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
Pinia和Vuex一样都是是vue的全局状态管理器,其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia,下面这篇文章主要给大家介绍了关于Vue.js状态管理之Pinia与Vuex的相关资料,需要的朋友可以参考下2023-02-02
最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下2017-08-08
最新评论