nginx部署访问vue-cli搭建的项目的方法


Posted in Javascript onFebruary 12, 2018

从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的,而hash是不需要的,只不过地址会多了一个#/的后缀。使用hash模式构建的项目打包后,我只需要使用webstorm之类的软件打开访问就能成功了。

nginx部署访问vue-cli搭建的项目的方法

但是我用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; 
    } 
  }

最后,直接地址栏输入端口访问:

nginx部署访问vue-cli搭建的项目的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
element中table高度自适应的实现
Oct 21 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 #Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 #Javascript
Vue+webpack项目基础配置教程
Feb 12 #Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 #Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
You might like
php 文件上传实例代码
2012/04/19 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
TypeScript入门-接口
2017/03/30 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python 将字符串转换成字典dict
2013/03/24 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python读大数据txt
2016/03/28 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
主管会计岗位责任制
2014/02/10 职场文书
医院义诊活动总结
2014/07/04 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
作风建设整改方案
2014/10/27 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript