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下操作css的float属性的特殊写法
Aug 22 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
JS中常用的正则表达式
Sep 29 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
javascript中call,apply,bind的区别详解
Dec 11 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
PHP 中的一些经验积累
2006/10/09 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
图解js图片轮播效果
2015/12/20 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
利用python获取Ping结果示例代码
2017/07/06 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python之yield和Generator深入解析
2019/09/18 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python 去除字符串中指定字符串
2020/03/05 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
大学生个人求职信范文
2013/09/21 职场文书
拓展培训心得体会
2014/01/04 职场文书
给物业的表扬信
2014/01/21 职场文书
九年级政治教学反思
2014/02/06 职场文书
教学评估实施方案
2014/03/16 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
欢迎新生标语
2014/10/06 职场文书
2014年超市工作总结
2014/11/19 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Python机器学习之底层实现KNN
2021/06/20 Python