vue项目打包部署_nginx代理访问方法详解


Posted in Javascript onSeptember 20, 2018

我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解。

1、先看vue项目打包(我这里使用的是vscode开发工具)

这里是我的项目结构:

vue项目打包部署_nginx代理访问方法详解

打包之前需要修改如下配置文件:

配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)

vue项目打包部署_nginx代理访问方法详解

配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

vue项目打包部署_nginx代理访问方法详解

上面两步修改完成之后就可以进行打包了

在控制台终端输入npm run build

vue项目打包部署_nginx代理访问方法详解

坐等打包

打包完成之后项目中会生成一个dist文件夹,直接访问里面的index.html就ok了

vue项目打包部署_nginx代理访问方法详解

我这里有点特殊的地方,需要修改下index.html文件,是因为自己加的一个moment.js

vue项目打包部署_nginx代理访问方法详解

ok,到这里打包的事情完成了,下面就放到服务器上去了

我这里使用的windows版本的nginx做演示,linux的不做讲解了,还有nginx的下载安装也不做讲解,直接看配置:

vue项目打包部署_nginx代理访问方法详解

配置完成后,去启动你的nginx,然后访问就ok了!

以上这篇vue项目打包部署_nginx代理访问方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript制作颜色反转小游戏
Sep 25 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 #Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 #Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 #Javascript
Vue框架里使用Swiper的方法示例
Sep 20 #Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 #Javascript
Vue常见面试题整理【值得收藏】
Sep 20 #Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
javascript数组详解
2014/10/22 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
win10系统中安装scrapy-1.1
2016/07/03 Python
python中的&&及||的实现示例
2019/08/07 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
如何查看python关键字
2021/01/17 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
学生周末回家住宿长期请假条
2014/02/15 职场文书