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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
红米手机抢购的js代码
Mar 10 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
实例详解Node.js 函数
Jun 10 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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
Sony CFR 320 修复改造
2020/03/14 无线电
如何使用PHP中的字符串函数
2006/11/24 PHP
学习php笔记 字符串处理
2010/10/19 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python实现合并字典的方法
2015/07/07 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python装饰器语法糖
2019/01/02 Python
python日期相关操作实例小结
2019/06/24 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
大学学年自我鉴定
2013/10/28 职场文书
优秀经理事迹材料
2014/02/01 职场文书
后备干部考察材料
2014/02/12 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
期中考试反思800字
2014/05/01 职场文书
汽车广告策划方案
2014/05/31 职场文书
暑期教师培训方案
2014/06/07 职场文书
雾霾停课通知
2015/04/24 职场文书
经销商会议开幕词
2016/03/04 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL