nginx部署访问vue-cli搭建的项目的方法
更新时间：2018年02月12日 11:31:55 作者：草灯
本篇文章主要介绍了nginx部署访问vue-cli搭建的项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的，而hash是不需要的，只不过地址会多了一个#/的后缀。使用hash模式构建的项目打包后，我只需要使用webstorm之类的软件打开访问就能成功了。
但是我用history模式构建的项目需要借助后台技术，我这里选用的是nginx反向代理来部署项目。具体做法如下：
1、创建后台服务器 对象
upstream mixVueServer{
server baidu.com;#这里是自己服务器域名
}
2、创建访问端口和反向代理规则
server {
listen 8082;
server_name localhost;
location / {
root E:/mix_vue/dist;#定位到项目的目录
#index index.html index.htm;
try_files $uri $uri/ /index.html;#根据官网这规则配置
}
location ~ \.php${
proxy_pass http://mixVueServer;#根据后端语言做反向代理处理跨域问题
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
最后，直接地址栏输入端口访问：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍 Vue3组件传参的方式,包括父子组件、跨层级组件、兄弟组件的传参,如父子组件通过属性绑定和自定义事件双向传参,跨层级组件可利用 Provide/Inject 机制和 Pinia 状态管理,兄弟组件可通过父组件中转或 mitt 库直接传参,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue 注释template中组件的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3使用echarts并封装echarts组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇vue 实现移动端键盘搜索事件监听，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
解决Vue+Electron下Vuex的Dispatch没有效果问题
这篇文章主要介绍了Vue+Electron下Vuex的Dispatch没有效果的解决方案 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue.js 3.0 为了解决 Object.defineProperty 的这些缺陷，使用 Proxy API 重写了响应式部分，并独立维护和发布整个 reactivity 库，这篇文章主要介绍了vue3 响应式的实现原理,需要的朋友可以参考下2022-06-06
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
这篇文章主要介绍了Vue全局使用less样式,组件使用全局样式文件中定义的变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue如何设置button的disable属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目中怎样嵌入其它项目的页面问题,具有很好 的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论