vue项目 使用nginx代理
2023-09-11 14:18:55 时间
nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建。
打包vue项目
npm run build
通过上面命令后打包好的静态资源将输出到dist目录中。如图所示
如图所示
修改nginx配置文件,配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段
server { listen 8888;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; root E:/vue/my_project/dist;#vue项目的打包后的dist location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件 #因此需要rewrite到index.html中,然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } #.......其他部分省略 }
完成nginx配置后重新加载配置文件,命令如下(ps:需要在安装的根路径下执行):
nginx -s reload
浏览器中访问:http://localhost:8888
通常情况下ngxin是安装到单独的服务器上,因此一般是把vue打包后的dist仍到服务上的具体位置,然后修改nginx.conf的root路径来指向我们的dist。
相关文章
- import Vue from 'vue';
- vue - webpack.dev.conf.js for node-portfinder
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue】通过Object.defineProperty向数组中添加属性和值(数据代理)
- vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
- Vue - Ant Design Vue表格组件(Table)分页器(Pagination)带搜索条件调用接口进行分页查询
- Vue - Vue Router 路由跳转及传参方式(声明 / 编程式路由及路由工具函数)
- 来吧!一文彻底搞定Vue组件!
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- Vue基础指令集锦
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- 基于Python+Vue+Mysql实现(物联网)智能大棚【100010340】
- 02-vue基础-Vue常用特性
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue文档摘录九:Vue Router
- vue router编程式导航
- Vue优化:常见会导致内存泄漏问题及优化
- Vue之computed计算属性
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- vue.js 样式绑定 font-size 问题
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现