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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
js验证账户名是否重复
May 26 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/02/18 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JQuery实现自定义对话框的代码
2008/06/15 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
react-native动态切换tab组件的方法
2018/07/07 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python文件操作基本流程代码实例
2017/12/11 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
django API 中接口的互相调用实例
2020/04/01 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
春节请假条
2014/04/11 职场文书
建设投标担保书
2014/05/13 职场文书
面试必备的求职信
2014/05/25 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android